/* Silence is golden */
#home {
    overflow-y: scroll;
    overflow-h: hidden;
}
#home,.home {
    width  : 100%;
    height : 100%;
}
.home {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : 0 var(--gap);
    grid-template-rows    : auto auto 1fr;
    grid-template-areas   : "about about about about about about about about about about about about" "controls controls controls controls controls controls controls controls controls controls controls controls" "slider slider slider slider slider slider slider slider slider slider slider slider";    
}
@media (width > 800px) {
    .home {
        grid-template-rows    : auto 1fr;
        grid-template-areas   : "about about about about about about about controls controls controls controls controls" "slider slider slider slider slider slider slider slider slider slider slider slider";    
    }
}
.about {
    grid-area : about; 
    padding   : 0.5rem var(--padding-side);
}
@media (width <= 800px) {
    .about {
        overflow    : hidden;
        background  : var(--text);
        color       : var(--background);
        display     : block;
        white-space : nowrap;
    }
}
.about p {
    font : var(--font-bold);
}
@media (width > 800px) {
    .about [aria-hidden] {
        display: none;
    }
}
@media (width <= 800px) {

    .about {
        display : flex;
        gap     : 1ch;
    }

    .about div {
        animation : marquee 45s linear infinite;
    }
}
@keyframes marquee {
    from { transform : translateX(0) }
    to   { transform : translateX(-100%) }
}
/* The Home Slider and Controls */
.slides {
    grid-area : slider;
    position  : relative;
}
.slide {
    position            : absolute;
    inset               : 0;
    transition-property : opacity;
}
.slide:not(.slide-active) {
    opacity        : 0;
    pointer-events : none;
}
.slide-image {
    height          : 100%;
    object-fit      : cover;
    object-position : center;
    pointer-events  : none;
}
.slider-prev,
.slider-next,
.slider-number {
    border : none;
    cursor : pointer;
}
.slider-prev {
    cursor : none;
}
.slider-next {
    cursor : none;
}
.slider-arrow {
    position       : absolute;
    width          : 22px;
    height         : 22px;
    mix-blend-mode : difference;
    fill           : white;
    display        : none;
}
.slider-title,
.slider-number {
    font : var(--font-bold);
    text-align: right;
}
.slider-controls {
    grid-area    : controls;
    justify-self : end;
    align-self   : center;
    padding : 0.5rem var(--padding-side);
    align-self: start;
    @media (width <= 800px) {
        display: flex;
        justify-content: space-between;
        justify-self: stretch;
    }
}
.slider-numbers {
    display : flex;
    gap : var(--gap);
    justify-content: flex-end;
    @media (width > 800px) {
        margin-top : 0.5rem;
    }
}
.slider-number:not(.slider-number-active) {
    opacity : .5;
}
.slider-buttons {
    grid-area       : slider;
    z-index         : 9000;
    pointer-events  : none;
    justify-content : space-between;
    display         : none;
}
/* Hide the buttons on touch devices */
@media (hover:hover) {
    .slider-buttons { display : flex; }
}
.slider-buttons button {
    width : 25vw;
    pointer-events: all;
}