.accordion {    width: 100%;    /* max-width: 1080px; */    height: 350px;    overflow: hidden;    /* margin: 50px auto; */  }    .accordion ul {    width: 100%;    display: table;    table-layout: fixed;    margin: 0;    padding: 0;  }    .accordion ul li {    display: table-cell;    vertical-align: bottom;    position: relative;    width: 16.666%;    height: 350px;    background-repeat: no-repeat;    background-position: center center;    transition: all 500ms ease;  }    .accordion ul li div {    display: block;    overflow: hidden;    width: 100%;  }    .accordion ul li div a {    display: block;    height: 350px;    width: 100%;    position: relative;    z-index: 3;    /* vertical-align: bottom; */    padding: 15px 20px;    box-sizing: border-box;    color: #fff;    text-decoration: none;    font-family: Open Sans, sans-serif;    transition: all 200ms ease;  }    .accordion ul li div a * {    opacity: 0;    margin: 0;    width: 100%;    text-overflow: ellipsis;    position: relative;    z-index: 5;    white-space: nowrap;    overflow: hidden;    -webkit-transform: translateX(-20px);    transform: translateX(-20px);    -webkit-transition: all 400ms ease;    transition: all 400ms ease;  }    .accordion ul li div a h2 {    font-family: 'Audrey', sans-serif;    text-overflow: clip;    font-size: 24px;    text-transform: uppercase;    margin-bottom: 2px;    top: 160px;  }    .accordion ul li div a p {    top: 160px;    font-size: 13.5px;  }    /*.accordion ul li:nth-child(1) {     background-image: url("../img/queens.jpg");    background-repeat: no-repeat;    background-position: center;    background-size: cover;    }    .accordion ul li:nth-child(2) {    background-image: url("../img/gallery/restaurant/kuta/kuta1.jpg");     background-repeat: no-repeat;    background-position: center;    background-size: cover;    }    .accordion ul li:nth-child(3) {    background-image: url("../img/queens-nusadua.jpg");     background-repeat: no-repeat;    background-position: center;    background-size: cover;    }    .accordion ul li:nth-child(4) {    background-image: url("../img/queens-ubud.jpg");     background-repeat: no-repeat;    background-position: center;    background-size: cover;    }    .accordion ul li:nth-child(5) {    background-image: url("../img/qlounge-2.jpg");     background-repeat: no-repeat;    background-position: center;    background-size: cover;    }    */    .accordion ul:hover li div.active {      width: 100%; /* Sesuaikan lebar ketika dihover */    }        .accordion ul li div.active a {      background: rgba(0, 0, 0, 0.4); /* Atur background ketika dihover */    }        .accordion ul li div.active a * {      opacity: 1;      -webkit-transform: translateX(0);      transform: translateX(0);    }        .accordion ul:hover li { width: 8%; }    .accordion ul:hover li:hover { width: 20%; }    .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }    .accordion ul:hover li:hover a * {    opacity: 1;    -webkit-transform: translateX(0);    transform: translateX(0);  }  @media screen and (max-width: 767px) {    .accordion ul {      display: block; /* Mengubah tata letak menjadi blok */      height: auto; /* Tinggi otomatis agar tinggi elemen dapat menyesuaikan konten */    }      .accordion ul li {      display: block; /* Mengubah tata letak elemen menjadi blok */      width: 100%; /* Memenuhi lebar layar */      height: 50px; /* Tinggi accordion lebih kecil */      margin-bottom: 10px; /* Memberi jarak antara setiap elemen */    }      .accordion ul li:hover {      height: 350px; /* Kembalikan tinggi accordion ke nilai normal saat dihover */    }      .accordion ul li div {      height: 100%; /* Tinggi otomatis agar konten vertikal ditampilkan secara penuh */    }      .accordion ul li div a {      height: 100%; /* Tinggi otomatis agar konten vertikal ditampilkan secara penuh */    }      .accordion ul li div a * {      opacity: 1; /* Set opacity kembali ke 1 saat dihover */      -webkit-transform: translateX(0); /* Set transform kembali ke nilai awal saat dihover */      transform: translateX(0); /* Set transform kembali ke nilai awal saat dihover */    }    body { margin: 0; }      .accordion { height: auto; }        .accordion ul li,    .accordion ul li:hover,    .accordion ul:hover li,    .accordion ul:hover li:hover {      position: relative;      display: table;      table-layout: fixed;      width: 100%;      -webkit-transition: none;      transition: none;    }  }