:root {
    --clr-accent-primary-hover: #268623;
    --clr-outside-yellow: #fdd20a;
    --clr-outside-yellow-hover: #fab819;

    --clr-txt-primary: var(--clr-granite2);
    --clr-txt-secondary: var(--clr-granite3);
    --clr-accent-primary: #3cc537;
    --clr-accent-primary-hover: #268623;

    --clr-granite1: rgb(28, 29, 31);
    --clr-granite2: rgb(56, 56, 59);
    --clr-granite3: rgb(96, 97, 99);
    --clr-granite4: rgb(123, 123, 125);
    --clr-granite5: rgb(147, 148, 150);
    --clr-granite6: rgb(172, 172, 174);
    --clr-granite7: rgb(207, 209, 211);
    --clr-granite8: rgb(227, 227, 229);
    --clr-granite9: rgb(241, 242, 243);
    --clr-granite10: rgb(255, 255, 255);

    --clr-snow-blind: var(--clr-granite10);

    --clr-spring1: rgb(26, 78, 24);
    --clr-spring2: rgb(28, 99, 26);
    --clr-spring3: rgb(38, 134, 35);
    --clr-spring4: rgb(47, 155, 44);
    --clr-spring5: rgb(56, 178, 52);
    --clr-spring6: rgb(60, 197, 55);
    --clr-spring7: rgb(76, 217, 72);
    --clr-spring8: rgb(133, 235, 129);
    --clr-spring9: rgb(190, 247, 188);
    --clr-spring10: rgb(233, 252, 232);

    --clr-spring: var(--clr-spring4);

    --clr-summer4: #CF4425;

    --clr-summer: var(--clr-summer4);

    --clr-conifer3: #276338;

    --clr-gray-line: #ededed;

    --clr-white-hover: #e6e7e8;

}

.Footer_footer__j6ZW {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--clr-granite9);
    background-color: var(--clr-granite2);
    font-size: 16px;
    line-height: 1.25;
}

.Footer_links__Nmwm {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
    gap: 2em;
    padding: 2em;
}

@media (min-width: 650.02px) and (max-width: 999.98px) {

.Footer_links__Nmwm {
        grid-template-columns: repeat(4, 1fr);
}
    }

@media (min-width: 1000px) {

.Footer_links__Nmwm {
        /* inline sizing needs to be specified since this uses `max-content` columns, which uses as much space as
        necessary but no more, instead of `fr` units, which expand to take up all available space */
        width: 100%;
        max-width: 1170px;
        /* 3rem left padding, 2x 135x40 badges with 1rem gap */
        grid-template-columns: repeat(4, -webkit-max-content) calc(3rem + 135px + 1rem + 135px);
        grid-template-columns: repeat(4, max-content) calc(3rem + 135px + 1rem + 135px);
        gap: initial;
        justify-content: space-between;
}
    }

.Footer_links__Nmwm > section a,
.Footer_legal__PzWd a,
.Footer_legal__PzWd button {
    color: inherit;
    /* parser doesn't like the `transparent` color keyword here for some reason */
    text-decoration: underline;
    -webkit-text-decoration: underline solid rgba(0, 0, 0, 0);
            text-decoration: underline solid rgba(0, 0, 0, 0);
    text-decoration-thickness: 0.125em;
    -webkit-text-decoration: underline 0.125em rgba(0, 0, 0, 0);
            text-decoration: underline 0.125em rgba(0, 0, 0, 0);
    text-underline-offset: 0.1875em;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    transition: text-decoration-color 300ms;
}

.Footer_links__Nmwm > section a:hover, .Footer_legal__PzWd a:hover, .Footer_legal__PzWd button:hover {
        text-decoration-color: inherit;
    }

.Footer_links__Nmwm > section > h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.375rem;
    font-weight: 500;
    font-variation-settings: 'wght' 500;
}

.Footer_links__Nmwm > section > ul {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
}

.Footer_links__Nmwm > aside {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    border-color: var(--clr-granite4);
    border-style: solid;
    grid-column-end: span 2;
    border-width: 1px 0 0 0;
    padding-top: 2em;
    grid-gap: 1em;
    gap: 1em;
    max-width: 375px;
}

.Footer_links__Nmwm > aside > img {
        grid-column-end: span 2;
        width: 100%;
    }

@media (min-width: 650.02px) and (max-width: 999.98px), (min-width: 1000px) {

.Footer_links__Nmwm > aside > img {
            grid-column-end: span 1;
    }
        }

@media (min-width: 650.02px) and (max-width: 999.98px) {

.Footer_links__Nmwm > aside {
        grid-template-columns: 1fr -webkit-max-content -webkit-max-content;
        grid-template-columns: 1fr max-content max-content;
        max-width: none;
        max-width: initial;
        grid-column-end: span 4;
        gap: 0 2em;
        align-items: center;
}
    }

@media (min-width: 1000px) {

.Footer_links__Nmwm > aside {
        grid-template-columns: -webkit-max-content;
        grid-template-columns: max-content;
        grid-template-rows: -webkit-max-content 1fr -webkit-max-content;
        grid-template-rows: max-content 1fr max-content;
        grid-column-end: span 1;
        padding-top: 0;
        justify-content: end;
        border-width: 0 0 0 1px;
        gap: initial;
}
    }

.Footer_social__vdxJ {
    justify-self: center;
    display: grid;
    grid-gap: 0.5em;
    gap: 0.5em;
    grid-template-columns: repeat(4, -webkit-max-content);
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
    place-items: center;
}

@media (min-width: 1000px) {

.Footer_social__vdxJ {
        justify-self: start;
}
    }

.Footer_social__vdxJ > h3 {
    grid-column: 1 / span 4;
    font-size: 1.5em;
    font-weight: normal;
    font-variation-settings: 'wght' 400;
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.Footer_social__vdxJ ul,
.Footer_social__vdxJ li {
    display: contents;
}

.Footer_social__vdxJ a {
    display: flex;
}

.Footer_social__vdxJ img {
    width: 24px;
    aspect-ratio: 1;
}

.Footer_apps__4j5V {
    justify-self: end;
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
}

@media (min-width: 1000px) {

.Footer_apps__4j5V {
        justify-self: start;
        flex-direction: row;
        height: 2.5em;
        gap: 0 1em;
}
    }

.Footer_apps__4j5V ul,
.Footer_apps__4j5V li {
    display: contents;
}

.Footer_apps__4j5V img {
    display: block;
    width: 100%;
    max-width: 135px;
    aspect-ratio: 135 / 40;
}

.Footer_legal__PzWd {
    align-self: stretch;
    background-color: var(--clr-granite1);
}

.Footer_legal__PzWd > div {
    display: grid;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr;
    grid-template-rows: -webkit-max-content -webkit-max-content;
    grid-template-rows: max-content max-content;
    grid-gap: 0.5em 2em;
    gap: 0.5em 2em;
    /* font size clamped to range [11px, 15px] as viewport goes from [375px, 650px] */
    font-size: max(11px, min(calc((4 / 275) * 100vw + (61 / 11) * 1px), 15px));
    padding: 0.5625em 1em;
    gap: 0.5em 2em;
    width: 100%;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
}

.Footer_legal__PzWd > div > img {
        grid-column: 1;
        grid-row: 1 / 3;
        justify-self: start;
        height: 8vw;
        max-height: 40px;
        align-self: center;
    }

.Footer_legal__PzWd > div p {

        grid-column: 2;
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1ch;
        font-size: inherit;
        margin-top: 0;
        margin-bottom: 0;
        text-align: right;
    }

.Footer_legal__PzWd > div p:first-of-type {
            grid-row: 1;
        }

.Footer_legal__PzWd > div p:last-of-type {
            grid-row: 2;
        }

.Footer_legal__PzWd > div p > :first-child {
            margin-right: auto;
        }

.Footer_legal__PzWd > div p > :only-child {
            margin-left: auto;
            margin-right: 0;
        }

