.footer {
    background: var(--color-blue);
    color: var(--color-white);
    padding-block: 56px 28px;

    .footer__top {
        display: flex;
        gap: 4rem 6rem;
    }

    .footer__top {
        display: grid;
        gap: 28px;
        grid-template-columns: 2fr 1.5fr 1.5fr;
        align-items: start;
    }

    .footer__brand-inner {
        text-align: end;
        width: fit-content;
    }

    .footer__brand-title {
        font-family: var(--ff-accent);
        font-size: 3rem;
        color: var(--color-light-purple);
        line-height: 100%;
    }

    .footer__brand-tag {
        color: var(--color-light-purple);
        font-size: 1.05rem;
        margin-top: 2px;
    }

    .footer__heading {
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: var(--color-off-white);
    }

    .footer__links {
        display: grid;
        gap: 8px;
    }

    .footer__category span {
        color: var(--color-off-white);
    }

    .footer__subcategories {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;
    }

    .footer__subcategories a::before {
        content: "– ";
        color: var(--color-off-white);
        font-weight: 400;
    }

    .footer__col a:hover {
        color: var(--color-light-purple);
        text-decoration: none;
    }

    .footer__social a:hover {
        color: var(--color-light-purple);
    }

    .footer__link {
        color: var(--color-off-white);
        font-size: 1.05rem;
    }

    .footer__link--nolink:hover {
        color: var(--color-off-white);
        font-size: 1.05rem;
    }


    .footer__link--nolink {
        color: var(--color-light-purple);
        cursor: default;
        pointer-events: none;
    }

    .footer__social {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .footer__social-link i {
        font-size: 1.8rem;
    }

    .footer__social-link path {
        fill: var(--color-light-purple);
    }

    .footer__social-link:hover path {
        fill: var(--color-purple);
    }

    .footer__related {
        margin-top: 22px;
    }

    .footer__bottom {
        margin-top: 22px;
        padding-top: 16px;
        font-size: 1.05rem;
        color: var(--color-light-purple);
    }

    @media (max-width: 720px) {
        .footer__top {
            grid-template-columns: 1fr;
        }
    }
}