.footer-bg {
    position         : relative;
    height           : 100lvh;
    background-color : var(--color-itp-blue);
    align-content    : center;
}

.footer {
    margin-inline  : auto;
    max-width      : var(--var-footer-width);
    display        : flex;
    flex-direction : column;
    gap            : 8rem;
    margin-bottom  : 8rem;
}

.footer-logo {
    width : 100%;
}

.logo-subline {
    display               : flex;
    gap                   : 0.5rem;
    justify-content       : flex-end;
    font                  : var(--font-small);
    font-feature-settings : var(--font-features);
    font-weight           : 800;
    color                 : var(--color-blue-light);
    transform             : translate(5px);
}

.footer-links {
    display               : flex;
    gap                   : 4rem;
    font                  : var(--font-small);
    font-feature-settings : var(--font-features);
}

.link-section {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.link-section-title {
    color         : var(--color-blue-light);
    font-weight   : 800;
    margin-bottom : 1rem;
}

.footer-link {
    font-weight           : 500;
    text-underline-offset : 4px;
    color                 : var(--color-blue-light-bright);
}

.footer-link:hover {
    cursor               : pointer;
    color                : white;
    text-decoration-line : underline;
}

@media (max-width : 880px) {
    .footer {
        margin-inline : 8rem;
    }

    .logo-subline {
        font-size : 1.4rem;
    }
}

@media (max-width : 720px) {
    .logo-subline {
        flex-direction : column;
        align-items    : end;
        font-size      : 1.2rem;
    }
}

@media (max-width : 480px) {
    .footer {
        margin-inline : 6rem;
    }

    .logo-subline {
        font-size : 1.0rem;
    }

    .footer-links {
        justify-content : center;
        gap             : 6rem;
    }
}