@media screen and (width <= 900px) {

header {
    #logo {
        width: 95vw;
    }
    #search {
        width: 95vw;

        padding: 1vw 0 0 0;

        input {
            width: auto;

            flex-grow: 1;
        }
    }
}

#slideshow {
    width: 90vw;
    height: 92vw;
    
    grid-template-columns: 10vw 69vw 10vw;

    button {
        width: 10vw;
        height: 92vw;

        border: none;
        background: transparent;

        font-family: "brandon-thin";
        font-size: 3rem;
    }

    img {
        min-width: 69vw;
        max-height: 92vw;

        padding: 0 0.5vw;
    }

    span {
        width: 69vw;

        padding: 0.5vw 10vw 0 10vw;
    }
}

#slideshow-details {
    width: calc(90vw - 2*0.75vw - 2*2px);

    margin: 0 0 7vw 0;

    gap: 0.2rem;
}

.gallery {
    width: 90vw;

    gap: 10vw 10vw;

    .gallery-pages {
        width: 90vw;
        height: 1.2rem;

        display: flex;
        align-items: center;
        justify-content: end;

        span {
            padding: 0.1rem 0.2rem 0 0;

            font-size: 1.3rem;
        }

        a, mark {
            padding: 0 0.2rem;
            
            background-color: black;
            
            color: white;
            font-family: "brandon-light";
            font-size: 1rem;
        }
    }

    .gallery-entry {
        width: 40vw;
        height: 40vw;

        background-size: cover;
        background-position: 50% 50%;

        .gallery-entry-cover {
            width: 40vw;
            height: 40vw;

            display: flex;
            align-items: center;
            justify-content: center;

            background-color: rgba(255,255,255,0.8);
            backdrop-filter: blur(1px);

            filter: opacity(100);
            transition: 0.25s ease-in-out;
        }
    }
    .gallery-entry:hover {
        .gallery-entry-cover {
            filter: opacity(0);

            transition: 0.25s ease-in-out;
        }
    }
}



}