@media screen and (max-width: 768px) {
    header nav {
        display: flex;
    }

    .home svg {
        bottom: -5rem;
    }

    .bride, .time {
        padding: 6rem 1.4rem 8rem;
    }

    .bride .bride_couple li {
        padding: 3rem 1.3rem 2.2rem;
        max-width: 100%;
    }

    .bride .bride_couple li .bride-frame { inset: 9px; }
    .bride .bride_couple li .bride-corner { width: 15px; height: 15px; }
    .bride .bride_couple li .bride-corner.tl,
    .bride .bride_couple li .bride-corner.tr { top: 5px; }
    .bride .bride_couple li .bride-corner.bl,
    .bride .bride_couple li .bride-corner.br { bottom: 5px; }
    .bride .bride_couple li .bride-corner.tl,
    .bride .bride_couple li .bride-corner.bl { left: 5px; }
    .bride .bride_couple li .bride-corner.tr,
    .bride .bride_couple li .bride-corner.br { right: 5px; }

    .bride h2 { font-size: 1.4rem; }
    .bride h3 { font-size: 2rem; }

    .bride i:nth-of-type(1) { right: 1.4rem; top: 2.6rem; }
    .bride i:nth-of-type(2) { left: 1.4rem; top: 24rem; }
    .bride i:nth-of-type(3) { right: 1.4rem; top: 55rem; }
    .bride i:nth-of-type(4) { left: 1.4rem; top: 60rem; }
    .bride i:nth-of-type(5) { right: 1.4rem; }

    .hadist {
        padding: 2rem 1.4rem;
    }

    .hadist i { left: 1.4rem; top: 24rem; }
    .hadist svg:nth-of-type(1) { top: -4rem; }
    .hadist svg:nth-of-type(2) { bottom: -5rem; }

    .time a + p + i { right: 1.4rem; top: 16rem; }

    .time .time-card {
        width: 100%;
        min-width: 0;
        padding: 2.6rem 1.3rem 2rem;
    }

    .time .time-card .time-frame { inset: 9px; }
    .time .time-card .time-corner { width: 15px; height: 15px; }
    .time .time-card .time-date { gap: 0.6rem; }
    .time .time-card .td-num { font-size: 3rem; padding: 0 0.6rem; }
    .time .time-card .td-day,
    .time .time-card .td-my { min-width: 3.6rem; font-size: 0.72rem; }
    .time-corner.tl, .time-corner.tr { top: 5px; }
    .time-corner.bl, .time-corner.br { bottom: 5px; }
    .time-corner.tl, .time-corner.bl { left: 5px; }
    .time-corner.tr, .time-corner.br { right: 5px; }

    .galeri {
        margin-top: -6rem;
        /* bottom padding clears the .wishas margin-top: -14rem overlap
           so the last collage row is never covered/cut off */
        padding: 4rem 1.4rem 16rem;
    }

    .galeri .gallery-grid {
        columns: 2;
        column-gap: 0.7rem;
    }

    .galeri .gallery-item {
        margin-bottom: 0.7rem;
        border-radius: 10px;
    }

    .galeri .gallery-item img {
        border-radius: 10px;
    }

    .galeri .lightbox {
        padding: 1rem;
    }

    .galeri .lightbox-close {
        top: 0.8rem;
        right: 0.8rem;
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.4rem;
    }

    .galeri .lightbox-prev,
    .galeri .lightbox-next {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.5rem;
    }

    .galeri .lightbox-prev { left: 0.6rem; }
    .galeri .lightbox-next { right: 0.6rem; }

    .galeri > i { top: 2rem; left: 3rem; }

    .wishas {
        padding: 1rem 1.4rem 2rem;
        margin-top: -14rem;
    }

    .wishas div:nth-of-type(1) > div {
        flex-direction: column;
    }

    .wishas div:nth-of-type(1) > div figure {
        width: 100%;
    }

    .wishas div:nth-of-type(1) > div figure img {
        width: 8rem;
    }

    .wishas div:nth-of-type(2) {
        padding: 2rem 1.2rem;
    }

    .wishas div:nth-of-type(2) > form {
        margin-top: -1rem;
    }

    .wishas div:nth-of-type(3) {
        padding: 2rem 1.2rem;
    }

    .wishas div:nth-of-type(3) ul li {
        gap: 0.6rem;
    }

    .wishas div:nth-of-type(3) .button-grup button {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .wishas svg:nth-of-type(1) { top: -4rem; }
    .wishas svg:nth-of-type(2) { bottom: -5rem; }

    .audio button {
        bottom: 5rem;
        right: 0.8rem;
    }

    footer {
        margin-top: 4rem;
        padding: 1rem 1.4rem 3.4rem;
    }

    footer h2 {
        font-size: 1.4rem;
    }

    footer > div a {
        font-size: 0.6rem;
    }
}