#nossas-fotos {
    padding: 68px 5px 18px;
    z-index: -1;
    background-image: linear-gradient(to top, #473B7B 0%, #5E88BA 100%);

    #gallery-primary {
        position: relative;
        text-align: center;
        overflow: hidden;
        user-select: none;
        z-index: 1;

        .photo-caption {
            color: white;
            backdrop-filter: blur(10px);
            text-shadow: 1px 1px 1px #000;
        }

        input {
            position: absolute;
            opacity: 0;
        }

        label {
            display: inline-block;
            width: 15px;
            height: 15px;
            border: solid 2px #fff;
            border-radius: 50%;
            margin: 65vh 5px 0 5px;
            cursor: pointer;
            transition-duration: .9s;
        }

        input:checked+label {
            background-color: #ffffff;
        }

        input+label::after {
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' style='fill:white'%3E%3Cpath d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z' /%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center 55%;
            background-size: 80px 80px;
            position: absolute;
            height: calc(90% - 12px);
            width: 80px;
            top: 0;
            left: 0;
            z-index: 20;
        }

        input:checked+label::after {
            background-image: none;
            width: 100vw;
            left: 0;
            z-index: 10;
        }

        input:checked+label+.slide~input+label::after {
            display: none;
        }

        input:checked+label+.slide+input+label::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' fill='white'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z' /%3E%3C/svg%3E");
            display: block;
            width: 80px;
            right: 0;
            left: auto;
        }

        .slide {
            position: absolute;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            transform: translateX(-100%);
            transition-duration: .4s;
            opacity: 1;
        }

        input:checked~.slide {
            transform: translateX(100%);
        }

        input:checked+label+.slide {
            transform: translateX(0);
            opacity: 1;
        }

        .bg1 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo01.webp');
        }

        .bg2 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo02.webp');
        }

        .bg3 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo03.webp');
        }

        .bg4 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo04.webp');
        }

        .bg5 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo05.webp');
        }

        .bg6 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo06.webp');
        }

        .bg7 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo07.webp');
        }

        .bg8 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo08.webp');
        }

        .bg9 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo09.webp');
        }

        .bg10 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo10.webp');
        }

        .bg11 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo11.webp');
        }

        .bg12 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo12.webp');
        }

        .bg13 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo13.webp');
        }

        .bg14 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo14.webp');
        }

        .bg15 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo15.webp');
        }

        .bg16 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo16.webp');
        }

        .bg17 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo17.webp');
        }

        .bg18 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo18.webp');
        }

        .bg19 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo19.webp');
        }

        .bg20 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo20.webp');
        }

        .bg21 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo21.webp');
        }

        .bg22 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo22.webp');
        }

        .bg23 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo23.webp');
        }

        .bg24 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo24.webp');
        }

        .bg25 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo25.webp');
        }

        .bg26 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo26.webp');
        }
    
        .bg27 {
            background-image: url('../../images/photo-gallery/couples-meeting/photo27.webp');
        }
    }
}

@media(max-width: 820px){
    #nossas-fotos {

        #gallery-primary {

            label {
                width: 10px;
                height: 10px;
                margin: 65vh 4px 0 4px;
            }
        }
    }
}

@media(max-width: 620px){
    #nossas-fotos {

        #gallery-primary {

            .photo-caption {
                font-size: 12px;
            }

            label {
                width: 6px;
                height: 6px;
                margin: 65vh 2px 0 2px;
            }

            input+label::after {
                background-size: 30px 30px;
                width: 40px;
            }

            input:checked+label+.slide+input+label::after {
                width: 40px;
            }
        }
    }
}

@media(max-width: 420px){
    #nossas-fotos {

        #gallery-primary {

            label {
                width: 2px;
                height: 2px;
                margin: 50vh 1px 0 1px;
            }
        }
    }
}

#galeria-de-fotos {
    padding: 18px 0 68px 0;
    border-radius: 0 0 30px 30px;
    background-image: linear-gradient(to top, #0f60a7 0%, #473B7B 100%);

    .content {
        padding: 0 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;

        .wrapper {
            display: flex;
            align-items: center;
            flex-direction: column;
            flex-grow: 1;
        }

        /* The first album will only appear when the albums are divided into two lines. */
        .wrapper.first-album {
            display: none;
        }

        /* One photo equals 100%. If there are 7 photos, the width should be set to 700%. */

        .wrapper.fourth-album {
            .view {
                .gallery {
                    width: 500%;
                }
            }
        }

        .wrapper.third-album {
            .view {
                .gallery {
                    width: 1100%;
                }
            }
        }

        .wrapper.second-album {
            .view {
                .gallery {
                    width: 800%;
                }
            }
        }

        .wrapper.first-album {
            .view {
                .gallery {
                    width: 600%;
                }
            }
        }

        .view {
            width: 400px;
            height: 400px;
            overflow: hidden;
            border-radius: 10px 10px 0 0;

            .gallery {
                display: flex;
                position: relative;

                input {
                    display: none;
                }

                .card {
                    width: 400px;
                    height: 400px;
                    transition: .8s;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .description {
                    width: 400px;
                    font-size: 12px;
                    padding: 2px;
                    position: absolute;
                    bottom: 0px;
                    text-align: center;
                    color: white;
                    backdrop-filter: blur(100px);
                }

                /* Fourth Album */

                #opc1000:checked ~ .move {
                    margin-left: 0% ;
                }

                #opc2000:checked ~ .move {
                    margin-left: -20% ;
                }

                #opc3000:checked ~ .move {
                    margin-left: -40% ;
                }

                #opc4000:checked ~ .move {
                    margin-left: -60% ;
                }

                #opc5000:checked ~ .move {
                    margin-left: -80% ;
                }

                /* Third Album */

                #opc301:checked ~ .move {
                    margin-left: 0% ;
                }

                #opc302:checked ~ .move {
                    margin-left: -9.09% ;
                }

                #opc303:checked ~ .move {
                    margin-left: -18.18% ;
                }

                #opc304:checked ~ .move {
                    margin-left: -27.27% ;
                }

                #opc305:checked ~ .move {
                    margin-left: -36.36% ;
                }

                #opc306:checked ~ .move {
                    margin-left: -45.45% ;
                }

                #opc307:checked ~ .move {
                    margin-left: -54.54% ;
                }

                #opc308:checked ~ .move {
                    margin-left: -63.63% ;
                }

                #opc309:checked ~ .move {
                    margin-left: -72.72% ;
                }

                #opc310:checked ~ .move {
                    margin-left: -81.81% ;
                }

                #opc311:checked ~ .move {
                    margin-left: -90.90% ;
                }

                /* Second Album */

                #opc201:checked ~ .move {
                    margin-left: 0% ;
                }

                #opc202:checked ~ .move {
                    margin-left: -12.5% ;
                }

                #opc203:checked ~ .move {
                    margin-left: -25% ;
                }

                #opc204:checked ~ .move {
                    margin-left: -37.5% ;
                }

                #opc205:checked ~ .move {
                    margin-left: -50% ;
                }

                #opc206:checked ~ .move {
                    margin-left: -62.5% ;
                }

                #opc207:checked ~ .move {
                    margin-left: -75% ;
                }

                #opc208:checked ~ .move {
                    margin-left: -87.5% ;
                }

                /* First album */

                #opc101:checked ~ .move {
                    margin-left: 0% ;
                }

                #opc102:checked ~ .move {
                    margin-left: -16.66% ;
                }

                #opc103:checked ~ .move {
                    margin-left: -33.32% ;
                }

                #opc104:checked ~ .move {
                    margin-left: -49.98% ;
                }

                #opc105:checked ~ .move {
                    margin-left: -66.64% ;
                }

                #opc106:checked ~ .move {
                    margin-left: -83.3% ;
                }
            }
        }

        #navigation {
            width: 400px;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            padding:5px;
            gap: 5px;
            border-radius: 0 0 10px 10px;
            background-color: rgba(245, 245, 245, 0.349);

            .mini-preview {
                width: 35px;
                height: 35px;
                border-radius: 5px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

@media (max-width: 1239px) and (min-width: 710px) {
    #galeria-de-fotos {
        .content {
            .wrapper.first-album {
                display: flex;
            }
        }
    }
}

@media (max-width: 830px) {
    #galeria-de-fotos {
        .content {
            .view {
                width: calc(100vw - 430px);
                height: calc(100vw - 430px);

                .gallery {

                    .card {
                        width: calc(100vw - 430px);
                        height: calc(100vw - 430px);
                    }

                    .description {
                        width: calc(100vw - 430px);
                    }
                }
            }

            #navigation {
                width: calc(100vw - 430px);
            }
        }
    }
}

@media (max-width: 720px) {
    #galeria-de-fotos {
        .content {
            .view {
                width: calc(100vw - 20px);
                height: calc(100vw - 20px);

                .gallery {

                    .card {
                        width: calc(100vw - 20px);
                        height: calc(100vw - 20px);
                    }

                    .description {
                        width: calc(100vw - 20px);
                    }
                }
            }

            #navigation {
                width: calc(100vw - 20px);
            }
        }
    }
}