@view-transition {
    navigation: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: gray;
}

/* Mobile Width -->
----------------------------------------------------------------------------------------------------------------------------/
---------------------------------------------------------------------------------------------------------------------------*/

/* Mobile Header -->
---------------------------------------------------------------------------------------------------------------------------*/

.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1.25fr;
    background-color: rgb(118, 43, 58);
    border-bottom: 4px solid #000;
}

.header .title {
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .title-S {
    display: block;
}

header .title-M,
header .title-L {
    display: none;
}

header .nav-drop {
    text-align: left;
    background-color: rgb(118, 43, 58);
}

header nav {
    display: flex;
}

header nav {
    display: flex;
    justify-content: space-around;
}

header nav div {
    width: 52px;
    height: 52px;
    border: 2px solid rgb(154, 148, 148);
    border-radius: 34px;
    background-color: white;
}

header nav img {
    border-radius: 32px;
    height: 48px;
    width: 48px;
}

/* <-- Mobile Header
---------------------------------------------------------------------------------------------------------------------------*/

/* Mobile Main -->
---------------------------------------------------------------------------------------------------------------------------*/
main {
    display: grid;
    grid-template-columns: 1fr;
}

h1 {
    text-align: center;
    font-size: 2rem;
    text-decoration: underline;
    padding: 2rem;
    background-color: #b4b4b4;
}

section {
    padding: 1rem 2rem 1rem 2rem;
    background-color: #b4b4b4;
}

h2 {
    text-indent: 2rem;
    padding: 1rem;
}

p {
    text-indent: 1.5rem;
}

.Introduction .container {
    display: flex;
    justify-content: center;
}

.Introduction .Nav-Directory {
    width: 256px;
    height: 68px;
    border: 2px solid rgb(154, 148, 148);
    border-radius: 34px;
    background-color: white;
}

.Introduction .Nav-Directory {
    background-image: url(/img/Header/Directory_Button_Expanded.jpg);
}

.Introduction img {
    border-radius: 32px;
    height: 64px;
    width: 64px;
}

.Introduction div {
    display: flex;
    justify-content: center;
}

.Introduction .Donate img {
    border-radius: 0px;
    height: 20px;
    width: 75px;
}

/* Latest Exhibits -------------------------------------------------> */

.Latest {
    display: grid;
    justify-content: center;
}

.Latest li {
    margin-bottom: 0.5rem;
    list-style: none;
}

figure {
    width: 384px;
    height: 288px;
    position: relative;
    overflow: hidden;
}

figcaption {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
}

figure img {
    width: 384px;
    height: 96px;
    background-color: #FFF;
}

figure a img {
    transform: scale(1.5);
    translate: 4rem 2rem;
}

figure figcaption {
    background: linear-gradient(180deg, rgba(71, 71, 71, 0) 20%, #303030 65%);
    color: #FFF;
}

figcaption .Exhibit_Desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 100px 2rem 0% 2rem;
    gap: 2rem;
}

figcaption .Exhibit_Desc p {
    text-indent: 0rem;
    padding-left: 2rem;
    margin-bottom: 0rem;
}

figcaption .Release_Date {
    display: flex;
    justify-content: flex-end;
    padding: 0rem 0.5rem 0.5rem 0rem;
    font-size: .75rem;
    border-top: 0px;
}

/* <-- Mobile Main
---------------------------------------------------------------------------------------------------------------------------*/

/* Mobile Footer -->
---------------------------------------------------------------------------------------------------------------------------*/

footer {
    margin-top: auto;
    border-top: 4px solid #000;
}

.footer {
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: rgb(118, 43, 58);
    min-height: 5rem;
}

.footer-links {
    padding: 20px;
}

.footer ul li {
    display: inline-block;
    text-decoration: none;
    padding-left: 10px;
}

.footer ul li a,
.footer ul li a:focus {
    color: gold;
    font-size: 1rem;
    text-decoration: none;
}

/* <-- Mobile Footer
---------------------------------------------------------------------------------------------------------------------------*/

/* Tablet Width -->
----------------------------------------------------------------------------------------------------------------------------/
---------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {

    /* Tablet Header -->
---------------------------------------------------------------------------------------------------------------------------*/

    .header {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .header .title {
        grid-column: 2 / 5;
    }

    header .title-M {
        display: block;
    }

    header .title-S,
    header .title-L {
        display: none;
    }

    header nav {
        grid-row: 2 / 3;
        grid-column: 1 / 6;
        display: flex;
    }

    header nav div {
        height: 68px;
        width: 148px;
    }

    header nav .Nav-Home {
        background-image: url(/img/Header/Home_Button_Expanded-M.jpg);
    }

    header nav .Nav-Gun-Models {
        background-image: url(/img/Header/Gun_Models_Button_Expanded-M.jpg);
    }

    header nav .Nav-Attachments {
        background-image: url(/img/Header/Attachments_Button_Expanded-M.jpg);
    }

    header nav .Nav-Collectables {
        background-image: url(/img/Header/Collectables_Button_Expanded-M.jpg);
    }

    header nav .Nav-Directory {
        background-image: url(/img/Header/Directory_Button_Expanded-M.jpg);
    }

    header nav img {
        height: 64px;
        width: 64px;
    }

    /* <-- Tablet Header
---------------------------------------------------------------------------------------------------------------------------*/

    /* Tablet Main -->
---------------------------------------------------------------------------------------------------------------------------*/
    main {
        display: grid;
        grid-template-columns: 1fr 10fr 1fr;
    }

    h1 {
        grid-column: 2 / 3;
        border-left: 2px solid #000;
        border-right: 2px solid #000;
    }

    section {
        grid-column: 2 / 3;
        border-left: 2px solid #000;
        border-right: 2px solid #000;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    h2 {
        text-indent: 3rem;
        padding: 1rem;
    }

    p {
        text-indent: 1.5rem;
    }

    /* Latest Exhibits -------------------------------------------------> */

    .Latest {
        display: grid;
        justify-content: center;
    }

    .Latest li {
        margin-bottom: 0.5rem;
        list-style: none;
    }

    figure {
        width: 576px;
        height: 288px;
        position: relative;
    }

    figcaption {
        position: absolute;
        inset: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 1rem;
    }

    figure img {
        width: 576px;
        height: 144px;
        background-color: #FFF;
    }

    figure figcaption {
        background: linear-gradient(180deg, rgba(71, 71, 71, 0) 30%, #303030 65%);
        color: #FFF;
    }

    figcaption .Exhibit_Desc {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: 150px 2rem 0% 2rem;
        gap: 2rem;
    }

    figcaption .Exhibit_Desc p {
        text-indent: 0rem;
        padding-left: 2rem;
        margin-bottom: 0rem;
    }

    figcaption .Release_Date {
        display: flex;
        justify-content: flex-end;
        padding: 0rem 0.5rem 0.5rem 0;
        font-size: .75rem;
        border-top: 0px;
    }

    /* <-- Tablet Main
---------------------------------------------------------------------------------------------------------------------------*/

    /* Tablet Footer -->
---------------------------------------------------------------------------------------------------------------------------*/

    /* <-- Tablet Footer
---------------------------------------------------------------------------------------------------------------------------*/

}

/* Full width -->
----------------------------------------------------------------------------------------------------------------------------/
---------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1400px) {

    /* Full Header -->
---------------------------------------------------------------------------------------------------------------------------*/

    .header {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 2fr;
        grid-template-rows: 1.5fr 1fr;
    }

    .header .title {
        grid-column: 2 / 7;
    }

    header .title-L {
        display: block;
    }

    header .title-M,
    header .title-S {
        display: none;
    }

    header nav {
        grid-column: 2 / 7;
        justify-content: space-between;
    }

    header nav div {
        width: 68px;
    }

    header nav div {
        transition-property: width;
        transition-duration: .5s;
        transition-timing-function: ease-in-out;
    }

    header nav div:hover {
        width: 256px;
    }

    header nav .Nav-Home {
        background-image: url(/img/Header/Home_Button_Expanded.jpg);
    }

    header nav .Nav-Gun-Models {
        background-image: url(/img/Header/Gun_Models_Button_Expanded.jpg);
    }

    header nav .Nav-Attachments {
        background-image: url(/img/Header/Attachments_Button_Expanded.jpg);
    }

    header nav .Nav-Collectables {
        background-image: url(/img/Header/Collectables_Button_Expanded.jpg);
    }

    header nav .Nav-Directory {
        background-image: url(/img/Header/Directory_Button_Expanded.jpg);
    }

    /* <-- Full Header
---------------------------------------------------------------------------------------------------------------------------*/


    /* Full Main -->
---------------------------------------------------------------------------------------------------------------------------*/
    main {
        display: grid;
        grid-template-columns: 2fr 4fr 2fr;
    }

    /* Latest Exhibits -------------------------------------------------> */

    figure {
        width: 768px;
        height: 100%;
    }

    figcaption {
        position: absolute;
        inset: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 2rem;
        z-index: 1;
    }

    figure img {
        width: 768px;
        height: 192px;
    }

    figure a img {
        transform: scale(1.5);
        translate: 4rem 2rem;
        transition-property: transform, translate;
    }

    figure:hover a img {
        transform: scale(1.25);
        translate: -2.5rem 1.5rem;
    }

    figure figcaption {
        background: none;
        color: #FFF;
    }

    figcaption .Exhibit_Desc {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: 1.5rem 2rem 0% 60%;
        gap: 2rem;
    }

    figure .Exhibit_Desc p {
        text-indent: 0rem;
        padding-left: 2rem;
        margin-bottom: 0rem;
    }

    figure .Release_Date {
        display: flex;
        justify-content: flex-end;
        padding: 0rem 0.5rem 0.5rem 0;
        font-size: .75rem;
        border-top: 0px;
    }

    figure .Exhibit_Desc {
        transform: translate3d(6rem, 0, 0);
        transition-property: opacity, transform;
    }

    figure .Release_Date {
        transform: translate3d(0, 4rem, 0);
    }

    figure .Exhibit_Desc,
    figure .Release_Date {
        opacity: 0;
    }

    figure:hover .Exhibit_Desc,
    figure:hover .Release_Date {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    figcaption::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(71, 71, 71, 0) 20%, #303030 100%);
        z-index: -1;
        opacity: 0;
        transition-property: opacity;
    }

    figure:hover figcaption::before {
        opacity: 1;
    }

    figcaption::before,
    figure a img,
    figure .Exhibit_Desc,
    figure .Release_Date {
        transition-duration: .4s;
        transition-timing-function: ease-in-out;
    }

    /* <-- Full Main
---------------------------------------------------------------------------------------------------------------------------*/

    /* Full Footer -->
---------------------------------------------------------------------------------------------------------------------------*/

    .footer ul li a {
        transition-property: font-size;
        transition-duration: .4s;
        transition-timing-function: ease-in-out;
    }

    .footer ul li a:hover {
        font-size: 1.25rem;
    }

    /* <-- Full Footer
---------------------------------------------------------------------------------------------------------------------------*/

}