/* Homepage CSS */
#home body {
    overflow : hidden;
}
#home .header {
    color : var(--white);
}
#home .is-active {
    color : var(--white);
}
#home .mobile-navigation-button-open {
    stroke : white;
}
#home {
    background: black;
}
/* The Home Background Images */
.home-backgrounds {
    position : fixed;
    inset    : 0;
    z-index  : 0;
    display  : grid;
    grid-template-rows: 100%;
}
/* The Subtle darker overlay */
.home-backgrounds::after {
    position: absolute;
    z-index: 1;
    content : "";
    inset: 0;
    background: black;
    opacity: .2;
}
/* The Single Image Background */
.home-background, .home-background img, .home-background-hover {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}
.home-background-hover {
    z-index : 2;
    opacity: 0;
    transition-property: opacity;
}
@media (width <= 700px) {
    .home-background-hover.active-background {
        opacity : 1 !important;
    }
}
.home-background {
    grid-row : 1;
    grid-column : 1;
}
/* The Home links */
.home-links {
    width : 100%;
    height : 100%;
}
.home-links-desktop {
    width : 100%;
    height : 100%;
    display: grid;
    position: relative;
    z-index: 2;
    padding : 0 var(--side-padding);
    gap : var(--grid-gap);
    font: var(--font-big);
    overflow: auto;
    grid-template-columns : var(--grid-columns);
    align-content         : center;

    @media (width <= 700px) {
        display : none;
    }

}
.home-links-mobile {
    grid-auto-rows   : calc(50svh - 1rem);
    scroll-snap-type : y mandatory;
    scroll-snap-stop : always;
    padding-bottom : 1rem;
    width : 100%;
    height : 100%;
    display: grid;
    position: relative;
    z-index: 2;
    padding : 0 var(--side-padding);
    gap : var(--grid-gap);
    font: var(--font-big);
    overflow: auto;
    @media (width > 700px) {
        display : none;
    }
}
.home-link-container {
    grid-column: span 3;
    justify-self: start;
    @media (width <= 700px) {
        scroll-snap-align: start;
        display : flex;
        align-items: flex-end;
    }
}
.home-link-item {
    color : var(--white);
    @media (width <= 700px) {
        padding-left : 1rem;
    }
}
@media (width <= 700px) {
    .home-link-item {
        padding-left : 1rem;
        position: relative;
    }
    .home-link-item::before {
        content : attr(data-counter);
        position : absolute;
        left : 0;
    }
}
.home-links-mobile-button {
    position : fixed;
    bottom   : 0;
    left     : 0;
    right    : 0;
    border : none;
    height : 5rem;
}
#home .footer-logo {
    fill : var(--background);
}