.landing{
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
    .hero {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        width: min-content;
        aspect-ratio: 1;
        gap: 2rem;
        
        .hero__content {
            display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
            padding: 1rem;
            border: 3px solid var(--primary);
            background: #FFF;
            gap: 1rem;

        }

        .hero__header { 
            display: flex;
            flex-direction: column;
            gap: .5rem;
            span {
            color: var(--primary);
            font-family: Basis Grotesque Mono Pro Light;
            font-size: 1.9rem;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            letter-spacing: 0.26644rem;
            text-transform: uppercase;
        }
    }

        .hero__info {
            font-size: 1.2rem;
            color: var(--primary);
            font-family: Basis Grotesque Mono Pro Light;
            font-style: 800;
            font-weight: 300;
            line-height: normal;
            letter-spacing: 0.26644rem;
            text-transform: uppercase;
        }

        .hero__icons {
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            a {
                text-decoration: none;
            }
            svg {
                height: 3rem;
                width: 3rem;
            }
        }
    }
}

.bkg {
    z-index: 0;
    position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    img {
        object-fit: cover;
        min-height: 100vh;
        width: 100%;
        &.bkg--winter {
            border-right: 4px solid var(--primary);
        }&.bkg--summer {
            filter: sepia(100%) brightness(1.5) contrast(.75);
            border-left: 0px solid var(--primary);
        }
            
    }
}

@media screen and (max-width: 600px) {
    .bkg {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        img {
            min-height: auto;
            height: 50vh;
            &.bkg--winter {
                border-right: none;
                border-bottom: 1.5px solid var(--primary);
            }&.bkg--summer {
                border-left: none;
                border-top: 1.5px solid var(--primary);
            }
        }
    }
}