.footer-wrapper {
    background: var(--cd-gradient);  
    --footer-col-padding-y: calc(var(--section-margin-bottom) / 1.5)
}

.footer-wrapper .footer-wrapper-inner {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    gap: 3rem;
}

.footer-wrapper .footer-cols-left {
    display: flex;
    flex-direction: column;
}

.footer-wrapper .footer-wrapper-inner .footer-col1-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    padding: var(--footer-col-padding-y) 0;
}

.footer-wrapper .footer-links,
.footer-wrapper .footer-links a {
    color: white;
    text-decoration: none;
}

.footer-wrapper .footer-links ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-wrapper .footer-headline {
    font-size: 1.7rem;
    margin-bottom: 2rem;
}

.footer-wrapper .footer-col5 {
    display: flex;
    flex-direction: column;
    background: white;
    padding: var(--footer-col-padding-y) 2rem;
    padding-bottom: 2rem;
}

.footer-wrapper .footer-col5 a {
    text-decoration: none;
}

.footer-wrapper .footer-col5 .footer-logo {
    margin-bottom: 1.5rem;
}

.footer-wrapper .footer-col5 .footer-small-logos-bottom {
    padding-top: 5rem;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 1rem;
}

.footer-wrapper .footer-copyright {
    color: white;
    padding: 2rem 0;
    font-size: 0.9rem;
    margin-top: auto;
}

.footer-wrapper .footer-copyright a {
    color: white;
    text-decoration: none;
}

/* 80rem (1280px) */
@media (width < 80rem) {
    .footer-wrapper .footer-wrapper-inner .footer-col1-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 48rem (768px) */
@media (width < 48rem) {
    .footer-wrapper .footer-wrapper-inner {
        gap: var(--section-padding-left-right);
    }

    .footer-wrapper .footer-wrapper-inner .footer-col1-4 {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }

    .footer-wrapper .footer-col5 {
        padding: var(--footer-col-padding-y) var(--section-padding-left-right);  
    }
}

/* 40rem (640px) */
@media (width < 40rem) {
    .footer-wrapper .footer-wrapper-inner {
        flex-direction: column;
    }

    .footer-wrapper .footer-wrapper-inner .footer-col1-4 {
        padding-bottom: 0;
    }

    .footer-wrapper .footer-col5 {
        padding: var(--section-padding-left-right);  
    }

    .footer-wrapper .footer-copyright {
        margin-top: 2rem;
    }
}