* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
body {
    background-color: #1B2021;
    font-size: 14px;
}
[x-cloak] { display: none; }

.wrapper {
    display: grid;
    place-items: center;
    min-height: 100%;
    padding-top: 6rem;
    padding-bottom: 3rem;
    
    .settings {
        $gray: lighten(#1B2021, 10%);
        position: fixed;
        right: 1rem;
        top: 1rem;
        z-index: 10;
        
        .form {
            label {
                color: white;
                span{ 
                    color: #fff;
                    background-color: #F25757; 
                    padding: 2px 4px;
                    border-radius: 2px;
                }
            }

            input {
                display: block;
                margin: .75rem 0 1.6rem;
                
                &[type="text"] {
                    padding: .25rem .5rem;
                }
            }
            button {
                border-radius: 2px;
                width: 80px;
                color: #fff;
                text-transform: uppercase;
                outline: none;
                box-shadow: none;
                &:active,
                &:hover{
                    background-color: #222;
                }
            }
        }
        
        button {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1B2021;
            min-height: 44px;
            min-width: 44px;
            background: #F25757;
            border-radius: 50%;
            border: none;
            box-shadow: 0 0 10px rgb(#F25757, .5);
            cursor: pointer;
            outline: 2px solid rgb(#F25757, .25);
            outline-offset: -1px;
            transition: all .2s ease;

            svg {
                color: white;
                height: 1.5rem;
                width: 1.5rem;
            }
            
            &.active {
                outline-offset: 5px;
            }
        }
        
        &__container {
            background-color: $gray;
            position: absolute;
            top: 4rem;
            right: 1rem;
            width: 450px;
            max-width: calc(100vw - 3rem);
            padding: 20px;
            box-shadow: 0 5px 15px rgb(black, .5);
            border-radius: 4px;
            max-height: calc(100vh - 6rem);
            overflow-y: auto;
            
            header {
                display: flex;
                align-items: center;
                width: 100%;
                padding-bottom: 1rem;
                margin-bottom: 1rem;
                border-bottom: 2px solid gray;
                
                div { margin-right: 2rem; }
                p {
                    color: gray;
                    span { color: #ccc; font-weight: bold; }
                    + p { margin-top: 5px; color: #ccc; }
                }
                
                button {
                    height: 36px;
                    width: 36px;
                    background-color: black;
                    outline: none;
                    color: white;
                    margin-left: auto;
                    box-shadow: none;
                }
            }
        }
    }
}

// Gallery Styling
.gallery {    
    // only for JS settings
    --tr: 150ms;
    
    // Gallery Settings
    $imgCount: 2;
    $imgBigWidth: 60%;
    $imgHeight: 500px; 
    $galleryWidth: 90%;
    $calcCount: #{$imgCount * 2};

    $radius: 0.5rem;
    $imgSpacing: clamp(10px, 3vw, 3rem);
    $transition: var(--tr);

    $bg: #1B202150;
    $txt: #f2f2f2;

    $grayscale: false;
    $txtSlide: true;
    
    // gallery settings end
   
    display: flex;
    flex-wrap: wrap;
    width: $galleryWidth;
    margin: auto;
    
    @media(min-width: 1600px) {
        max-width: 1400px;
    }

    > figure {        
        position: relative;
        height: $imgHeight;
        margin: 0;
        padding: 0;
        width: 100%;
        border-radius: $radius;
        overflow: hidden;
        
        img {
            display: block;
            max-width: 100%;
            width: 100%;
            height: $imgHeight;
            max-height: 100%;
            object-fit: cover;
            object-position: center;
        }

        > figcaption {
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            color: $txt;
            line-height: 1.6;
            padding: $imgSpacing;
            max-height: 100%;
            background-color: $bg;
            z-index: 1;
            
            > h3 {
                letter-spacing: 1px;
                color: #fff;
                font-size: 1.25em;
            }
        }

        @media (max-width: 639px) {
            &:not(:first-child) {
                margin-top: $imgSpacing;
            }
        }
    
        @media (min-width: 640px) {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: calc(#{100% - $imgBigWidth} / #{$imgCount - 1} - #{$imgSpacing});
        
            &:not(:nth-child(-n + #{$imgCount})) {
                margin-top: $imgSpacing;
            }
    
            &:not(:nth-child(#{$imgCount}n)) {
                margin-right: $imgSpacing;
            }

            &:last-child {
                margin-right: 0;
            }

            &:nth-child(#{$calcCount}n + 1),
            &:nth-child(#{$calcCount}n + #{$calcCount}) {
                flex-basis: calc(#{$imgBigWidth} - #{$imgSpacing});
            }
        }

        @if $txtSlide == true {
            > figcaption {
                transition: transform var(--tr) ease-in-out;
                transform: translate3d(0, 100%, 0);
            }
            &:hover > figcaption {
                transform: none;
            }
        }

        @if $grayscale == true {
            @media (hover:hover) {
                img {
                    filter: grayscale(.8);
                    transition: filter var(--tr) ease-in-out;
                }
                &:hover img {
                    filter: none;
                }
            }
        }
    }

}