body {
    padding: 0;
    overflow: hidden;
    grid-template-rows: max-content max-content max-content max-content;
    height: 100dvh;
}

header {
    padding: 26px;
    /* background-color: yellow; */
    height: 76px; /* !! i had to add a height. for some reason on mobile the header was expanding */
    margin-bottom: initial;
}

nav#submenu {
    padding: 0 26px;
    z-index: 2;
    height: max-content;
    width: max-content;
    margin-bottom: initial;
    /* background-color: blue; */
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px;
    grid-column: 1/-1;
    /* background-color: pink; */
}

main.grid {
    grid-template-rows: auto 1fr;
    /* height: calc(100vh - 52px); */
    grid-row: 2;
}

    main.grid header.grid {
        margin: 26px 26px 0 26px;
        /* background-color: thistle; */
        height: 151px; /* !! not necessary to declare height, but ensures that it wont mess up the grid heights below */
    }

    main.grid .page-wrap.grid {
        grid-template-rows: minmax(0, 1fr) auto;
        height: calc(100dvh - 76px - 26px); /* !! replace '130px' with actual header height both here and in 'main.grid header.grid' */
    }

        main.grid .page-wrap.grid .slides {
            /* background-color: wheat; */
            grid-column: 1/-1;
            height: 100%;
        }

            main.grid .page-wrap.grid .slides .slide.grid {
                /* background-color: violet; */
                grid-template-columns: 232px 1fr 232px;
                grid-template-rows: 1fr auto 1fr;
                row-gap: 13px;
                align-items: start;
                margin: auto;
                margin-top: -13px; /* !! this accounts for the centering spacer */
                height: calc(100% + 13px); /* !! this accounts for the negative margin */
                text-decoration: none;
            }

                    main.grid .page-wrap.grid .slides .slide.grid img {
                        width: 100%;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: contain;
                        overflow: hidden;
                        margin: auto;
                        display: block;
                        grid-row: 2;
                        grid-column: 2/3;
                    }

                    main.grid .page-wrap.grid .slides .slide.grid .caption {
                        margin: 0 26px;
                        color: var(--text-color);
                        font-size: var(--caption);
                        line-height: var(--caption-leading);
                        margin: 0 auto;
                        width: 100%;
                        /* text-align: center; */
                        grid-row: 3;
                        grid-column: 2;
                    }


/* Banners */
main.grid .page-wrap.grid #banners {
    grid-column: 1/-1;
    background-color: rgba(117, 128, 139, 0.08);

}
main.grid .page-wrap.grid #banners:hover {
    background-color: rgba(117, 128, 139, 0.2);
}
#banners .banner {
    /* background-color: paleturquoise; */
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 26px;
    /* background-color: rgba(117, 128, 139, 0.2); */
    padding: 10px 26px 13px 26px;
}
#banners a.banner {
    color: var(--text-color);
    text-decoration: none;
}
#banners .banner .label {
    grid-column: 1 / 2;
    width: max-content;
    font-size: var(--caption);
    line-height: var(--caption-leading);
    padding-top: 4px;
}
#banners .banner .message {
    grid-column: 2 / 6;
    font-size: var(--p);
    line-height: var(--p-leading);
    margin: 0 auto;
    text-align: center;
}

/* Animation */
.slide-in {
    animation: slide-in ease-in .5s forwards;
}
.slide-out {
    animation: slide-out ease-out .5s forwards;
}
@keyframes slide-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slide-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.banner-in {
    animation: banner-in ease-in 1s forwards;
}
.banner-out {
    animation: banner-out ease-out 1s backwards;
}
@keyframes banner-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes banner-out {
    100% {
        opacity: 0;
    }
}

/* Breakpoints */

/* Tablet */
@media (max-width: 1300px) {
    main.grid {
        grid-row: 3;
    }
    main.grid .page-wrap.grid {
        height: calc(100dvh - 76px - 81px - 26px - 26px);
    }
    main.grid .page-wrap.grid .slides .slide.grid img {
        grid-column: 1/-1;
    }
    main.grid .page-wrap.grid .slides .slide.grid .caption {
        grid-column: 1/-1;
    }
}


@media (max-width: 642px) {
    header {
        height: 145px;
    } 
    /* body {
        overflow: auto;
    } */
    /* main.grid header.grid {
        height: 227px;
    } */
    main.grid .page-wrap.grid {
        /* height: calc(100vh - 227px - 26px - 26px); */
        /* height: calc(100dvh - 255px - 26px); */
        height: calc(100dvh - 145px - 81px - 26px - 26px);
    }

    main.grid .page-wrap.grid .slides .slide.grid {
        grid-template-columns: 1fr;
    }

    /* Banner */
    #banners .banner {
        grid-template-columns: 1fr;
        grid-gap: 0px;
        padding: 10px 26px 13px 26px;
    }
    #banners .banner .label {
        grid-column: 1;
        position: relative;
        font-size: var(--caption);
        margin-bottom: 7px;
    }
    #banners .banner .message {
        grid-column: 1;
        margin: 0;
        text-align: left;
    }
}