/* Responsive Breakpoint */
@media (max-width: 1024px) {
  /* Tamu */
  .isi-tamu {
    width: 60%;
    height: 80%;
  }
  .tamu-atas {
    transform: translateX(50px);
  }
  .tamu-bawah {
    transform: translateX(-50px);
  }
  /* cover */

  /* mempelai */
  .mempelai {
    column-gap: 0px;
    margin: 0;
    padding: 0;
  }

  .pria img,
  .wanita img {
    width: 30vw;
    margin: 0 1rem;
    padding: 0;
  }

  .nlengkap {
    /* order: 1; */
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .dexp,
  .dexw {
    margin: 2rem 2rem;
    /* text-align: center; */
  }

  /* Countdown */

  /* kutipan-ayat */

  /* Venue */
  .venue {
    width: 100%;
  }

  .venue .akad,
  .venue .resepsi {
    width: 90%;
  }

  /* Protokol */
  .protokol {
    width: 80%;
  }

  /* Gallery */

  /* RSVP */
}

@media (max-width: 768px) {
  /* Cover */
  .pengantinBR {
    display: block;
  }
  /* Tamu */
  .tamu-atas {
    transform: translateX(20px);
    /* width: 60%; */
  }
  .tamu-bawah {
    transform: translateX(-60px);
    height: 20rem;
    width: 20rem;
  }
  /* Cover */

  /* Mempelai */
  .mempelai {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 0.5fr 2fr 0.5fr;
    grid-template-areas: "weare" "pria" "dexp" "wanita" "dexw";
    justify-items: center;
    align-items: center;
  }

  .pria,
  .wanita {
    display: grid;
    place-items: center;
  }

  .pria .nlengkap {
    order: 2;
  }

  .nlengkap {
    margin-top: 1rem;
  }

  .dexp,
  .dexw {
    text-align: center;
  }

  .dexp {
    margin-bottom: 3rem;
  }

  /* Countdown */

  /* Kutipan-ayat */

  /* Venue */
  .venue {
    width: 100%;
  }

  .venue .akad,
  .venue .resepsi {
    width: 100%;
  }

  /* Protokol */
  .protokol {
    width: 90%;
  }

  /* Gallery */

  /* Video */
  .video {
    margin-bottom: 5rem;
  }
  .isivideo {
    width: 80%;
  }

  /* RSVP */

  .rsvp {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
  }

  .rsvptop,
  .isi {
    width: 100%;
  }

  .isi {
    margin: 5rem 0;
  }

  .rsvp h1,
  .rsvp h4 {
    text-align: center;
  }

  .rsvp .flexform {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    width: 100%;
    margin: 2rem auto;
  }

  .form .inputnama {
    padding: 0.6rem;
    margin: 0 auto;
    width: 100%;
  }

  .flexform .jumlahtamu {
    margin: 0;
    width: 100%;
    padding: 0.5rem;
  }

  .flexform .telepon {
    padding: 0.6rem;
    margin-left: 0;
    width: 100%;
  }

  .doaucapan {
    margin: 0;
    width: 100%;
  }
  .inputradio {
    margin: 1.5rem 0;
  }

  .form .kirim {
    margin-left: auto;
  }

  .quotes {
    margin-top: 1.5rem;
  }

  /* Hadiah */
  .bank,
  .ovo,
  .dana {
    width: 50%;
  }

  /* Penutup */
  .penutup {
    height: 45rem;
  }

  .penutup .maps {
    height: 30rem;
    width: 75%;
  }

  .last {
    position: absolute;
    bottom: 15%;
  }
}

@media (max-width: 550px) {
  html {
    font-size: 55%;
  }

  /* Tamu */
  .isi-tamu {
    /* flex-direction: column; */
    width: 60%;
    height: 60vmax;
  }
  .isi-tamu {
    width: 60%;
    height: 60vmax;
    flex-direction: column;
  }
  .tamu-atas {
    /* margin-left: 0; */
    width: 90%;
    margin: 2rem 0;
    transform: translate(0);
    text-align: center;
  }
  .tamu-bawah {
    /* display: none; */
    position: relative;
    transform: translate(0);
    left: 0;
    top: 0;
  }
  /* Cover */
  .cover {
    background-image: url("../../../assets/img/1/80220817_2936971529659273_2569350329543950336_n.jpg");
  }
  .header {
    padding-top: 25vh;
  }
  .cover h1 {
    font-size: 5.5rem;
  }
  .cover h3 {
    font-size: 2rem;
  }

  /* Mempelai */
  .weare {
    text-align: center;
  }

  .pria img,
  .wanita img {
    width: 40vw;
  }

  /* Countdown */

  /* Kutipat-ayat */
  .kutipan-ayat {
    margin-top: -5rem;
    width: 90%;
  }

  /* Venue */
  .venue {
    height: 75rem;
    width: 100%;
  }

  .akd1,
  .akd2,
  .rsp1,
  .rsp2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
  }

  .venue .lokasi-acara,
  .venue .waktu-acara {
    text-align: center;
    width: 100%;
  }

  .icoven {
    order: 0;
    margin-bottom: 1.5rem;
  }

  .lokasi-acara {
    order: 2;
  }

  /* Protokol */

  /* Gallery */
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
    width: 90%;
  }

  /* Video */
  .isivideo {
    width: 90%;
  }

  /* RSVP */

  /* Hadiah */
  .bank,
  .ovo,
  .dana {
    width: 80%;
  }
}

@media (max-width: 325px) {
  html {
    font-size: 50%;
  }

  .cover h1 {
    font-size: 4.5rem;
  }
  .cover h3 {
    font-size: 1.8rem;
  }

  .venue {
    height: 80rem;
  }

  .penutup {
    height: 40rem;
  }

  .penutup .maps {
    top: -7rem;
    height: 25rem;
  }
}

@media (max-width: 305px) {
  .venue {
    height: 80rem;
  }
}

@media (max-width: 279px) {
  /* Kutipan-Ayat */
  .kutipan-ayat {
    height: 40rem;
  }

  /* Venue */
  .venue {
    height: 80rem;
  }
  /* RSVP */

  .last {
    position: absolute;
    bottom: 5%;
  }
}