footer {
    --footer-bg-color: var(--color-black);
    --footer-text-color: var(--color-black-contrast);
    --footer-line-color: #84A0CA;

    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
    display: block;
    grid-template-columns: 1fr;
    text-align: left;
    font-size: 1.2rem;
}

footer a {
    color: var(--footer-text-color);
    text-decoration: none;
    transition: .2s;
}

footer a:hover {
    color: var(--color-secondary);
}

.footer-contact-inner .separator {
    color: var(--footer-line-color);
    margin: 0 1rem;
}

footer .menu,
footer .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .menu > li,
footer .sub-menu > li {
    margin-bottom: 0.5rem;
}

footer .menu > li:last-child {
    margin-bottom: 0;
}

footer .sub-menu > li:first-child {
    margin-top: 0.5rem;
}

footer .sub-menu li::before {
    content: "-";
    padding-right: 0.7rem;
}

.footer-grid {   
    display: grid;
    place-content: stretch;
    place-items: stretch;
    column-gap: 2rem;
    row-gap: 2.5rem;
    padding: var(--padding-rows) 0;

    grid-template-columns: 1fr; 
    grid-template-areas: "logo"
                         "contact"
                         "top-separator"
                         "quicklinks"
                         "products"
                         "resources"
                         "bottom-separator"
                         "mammoth"; 
} 

.footer-grid h6 {
    margin-bottom: 1.5rem;
}

.footer-contact,
.footer-quicklinks,
.footer-products,
.footer-resources,
.footer-mammoth {
    width: 100%;
}

.footer-logo {
    width: 15rem;
    grid-area: logo;
}

.footer-contact {
    grid-area: contact;
}

.footer-quicklinks {
    grid-area: quicklinks;
}

.footer-products {
    grid-area: products;
}

.footer-resources {
    grid-area: resources;
}

.footer-top-separator {
    grid-area: top-separator;
    background-color: var(--footer-line-color);
    height: .1rem;
    width: 100%;
    margin: 0;
}

.footer-bottom-separator {
    grid-area: bottom-separator;
    background-color: var(--footer-line-color);
    height: .1rem;
    width: 100%;
    margin: 0;
}

.footer-mammoth {
    grid-area: mammoth;
    container-name: mammoth;
    container-type: inline-size;
}

.footer-mammoth .mammoth-logo {
    width: 100%;
    max-width: 22rem;
    margin-top: -0.8rem;
    margin-bottom: 1.5rem;
}

@container mammoth (min-width: 480px)  { 
    .footer-mammoth-inner {
        text-align: center;
    }

    .footer-mammoth-content {   
        display: inline-grid;
        grid-template-columns: clamp(18rem, 30vw, 22rem) auto;
        column-gap: 4rem;
        align-content: center;
        align-items: center;
        text-align: left;
    } 

    .footer-mammoth .mammoth-logo {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 575px)  {
    .footer-products,
    .footer-resources {
        border-top: .1rem solid var(--footer-line-color);
        padding-top: 2.5rem;
    }
}

@media (min-width: 576px)  { 
    .footer-grid {   
        grid-template-columns: repeat(3, auto);  
        grid-template-areas: "contact contact logo"
                             "top-separator top-separator top-separator"
                             "quicklinks products resources"
                             "bottom-separator bottom-separator bottom-separator"
                             "mammoth mammoth mammoth";
    }

    .footer-logo {
        justify-self: end;
    }

    .footer-bottom-separator {
        display: block;
    }
}

@media (min-width: 768px)  { 
    footer {
        font-size: 1.3rem; 
    }

    .footer-grid {   
        grid-template-columns: repeat(3, 1fr);  
        grid-template-areas: "contact contact logo"
                             "top-separator top-separator top-separator"
                             "quicklinks products resources"
                             "bottom-separator bottom-separator bottom-separator"
                             "mammoth mammoth mammoth";
    }

    .footer-logo {
        justify-self: end;
        width: 16.5rem;
    }

    .footer-bottom-separator {
        display: block;
    }
}

@media (min-width: 1024px) { 
    .footer-grid {   
        grid-template-columns: repeat(9, 1fr);  
        grid-template-areas: "logo logo logo logo logo logo logo logo logo"
                             "contact contact contact quicklinks quicklinks products products resources resources"
                             "bottom-separator bottom-separator bottom-separator bottom-separator bottom-separator bottom-separator bottom-separator bottom-separator bottom-separator"
                             "mammoth mammoth mammoth mammoth mammoth mammoth mammoth mammoth mammoth";
    }

    .footer-top-separator {
        display: none;
    }

    .footer-logo {
        justify-self: start;
    }
}

@media (min-width: 1280px) { 
    footer {
        font-size: 1.4rem; 
    }

    .footer-grid {   
        grid-template-columns: repeat(11, 1fr);  
        grid-template-areas: "logo logo logo logo logo logo logo logo logo logo logo"
                            "contact contact contact quicklinks quicklinks products products resources resources mammoth mammoth";
    }

    .footer-bottom-separator {
        display: none;
    }

    .footer-logo {
        width: 18rem;
    }
}

@media (min-width: 1540px) { 
    .footer-grid {   
        grid-template-columns: repeat(12, 1fr);  
        grid-template-areas:    "logo logo logo logo logo logo logo logo logo logo logo logo"
                                "contact contact contact quicklinks quicklinks products products resources resources bottom-separator mammoth mammoth";
    } 

    .footer-bottom-separator {
        display: block;
        height: calc(100% + var(--padding-rows));
        margin: 0 0 calc(0rem - var(--padding-rows));
        width: .1rem;
        justify-self: center;
    }
}