/* ---------------------------------------------------- */
/* xsmall - 24rem & wider (384px) */
@media screen and (min-width: 24rem) {


}

/* ---------------------------------------------------- */
/* small - 36rem & wider (576px) */
@media screen and (min-width: 36rem) {

    .guides {
        grid-template-columns: repeat(2, 1fr);
    }
    .guides .link {
        aspect-ratio: 1;
    }
    .site-footer > .inner {
        grid-template-areas: 
        "logo logo logo contact contact contact"
        "nav1 nav1 nav2 nav2 nav3 nav3"
        "footer footer footer footer footer footer "
        ;
        grid-template-columns: repeat(6, 1fr);
    }
    .page-img {
        aspect-ratio: 3/2;
    }

}

/* ---------------------------------------------------- */
/* medium - 45rem & wider (720px) */
@media screen and (min-width: 45rem) {

    .columns {
        grid-template-columns: repeat(12, 1fr);
    }
    .columns .column {
        grid-column: span var(--span);
    }

    .guides .link {
        aspect-ratio: 4/3;
    }

    .site-footer > .inner > .footer-col {
        display: grid;
        grid-template-areas:
        "funding funding"
        "copyright button"
        ;
        text-align: left;
    }
    .site-footer > .inner > .footer-col > :nth-child(1) {
        grid-area: funding;
    }
    .site-footer > .inner > .footer-col > :nth-child(2) {
        grid-area: button;
    }
    .site-footer > .inner > .footer-col > :nth-child(3) {
        grid-area: copyright;
    }

}

/* ---------------------------------------------------- */
/* large - 60rem & wider (960px) */
@media screen and (min-width: 60rem) {

    .guides .link {
        aspect-ratio: 2/1;
    }
    .page-img {
        aspect-ratio: 2/1;
    }

    .site-header > .courtesy {
        grid-template-columns: max-content auto max-content;
        grid-template-areas: 
        "hours search toggle";
    }
    .site-header .search-form {
        max-width: 24rem;
    }
    .site-header .search-form input[type="search"] {
        border-top-left-radius: 0;
    }
    .site-header .search-form .btn {
        border-top-right-radius: 0;
    }
    .site-header > .inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .site-nav {
        display: block;
    }
    .mobile-nav-toggle {
        display: none; /* for mobile */
    }

}

/* ---------------------------------------------------- */
/* xlarge 70rem & wider (1120px) */
@media screen and (min-width: 70rem) {

    .site-header > .inner {
        flex-wrap: nowrap;
        justify-content: space-between;
    }


    .page-title.has-img {
        align-items: center;
        grid-template-columns: 2fr 3fr;
        grid-template-areas: "image copy";
        text-align: left;
    }
    .page-icon {
        right: -1rem;
        bottom: -1rem;
        top: auto;
        left: auto;
        margin-left: 0;
    }
    .page-title.has-img > .copy .lede {
        margin: 0;
        max-width: none;
    }
    .page-image {
        grid-area: image;
    }
    .page-img {
        aspect-ratio: 1;
    }
}
/* ---------------------------------------------------- */
/* xxlarge 90rem & wider (1440px) */
@media screen and (min-width: 90rem) {

    .page-img {
        aspect-ratio: 4/3;
    }

}