.root {
    display: flex;
    width: 100%;
    background: var(--color-bg-base-dark);
    color: var(--color-text-primary-inverted);
    justify-content: center;
    overflow: hidden;
}

.container {
    display: flex;
    max-width: 1440px;
    width: 100%;
    padding: var(--spacing-64) var(--spacing-32) 0 var(--spacing-32);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-64);
    overflow: hidden;
}

.content {
    width: 100%;
    display: flex;
    padding: 0 var(--spacing-88);
    justify-content: space-between;
    align-items: center;
    align-self: center;
}

.footerLeft {
    display: flex;
    width: 360px;
    height: 600px;
    padding: var(--spacing-16);
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: center / cover no-repeat url('./assets/newsletter.jpg');
    border-radius: var(--border-radius-lg);
}

.footerRight {
    display: flex;
    width: 720px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-80);
}

.columns {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}

.footerLinks {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}

.about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.socials {
    display: flex;
    min-width: 180px;
    justify-content: space-between;
    align-items: center;
}

.img {
    display: flex;
    padding-right: 1px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 1375px;
    height: 275px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    aspect-ratio: 5/1;
    margin-bottom: -75px;
}

@media (width < 1440px) {
    .container {
        max-width: 1024px;
        width: 1024px;
        gap: var(--spacing-64);
        overflow: hidden;
    }

    .content {
        align-items: flex-start;
        padding: 0;
        gap: 60px;
    }

    .footerLeft {
        width: 360px;
        height: 600px;
        flex-shrink: 0;
    }

    .footerRight {
        width: 540px;
        gap: var(--spacing-64);
        flex: 1 0 0;
    }

    .columns {
        gap: var(--spacing-24);
    }

    .about {
        gap: 39px;
    }

    .img {
        padding-top: 59px;
        width: 960px;
        aspect-ratio: 960/191;
        flex: 1 0 0;
        margin-bottom: -50px;
    }
}

@media (width < 1024px) {
    .container {
        width: 820px;
        padding: var(--spacing-64) var(--spacing-32) 0px var(--spacing-32);
        gap: var(--spacing-64);
        overflow: hidden;
    }

    .content {
        flex-direction: column;
        align-items: center;
        gap: 60px;
        align-self: stretch;
    }

    .footerRight {
        width: 100%;
        gap: var(--spacing-64);
        flex: 1 0 0;
    }

    .about {
        gap: var(--spacing-40);
    }

    .img {
        width: 756px;
        aspect-ratio: 756/151;
        flex: 1 0 0;
        padding-top: 0;
        margin-bottom: -40px;
    }

    .socials {
        margin: 0;
    }
}

@media (width < 820px) and (width >= 768px) {
    .container {
        width: 100%;
        max-width: 820px;
        padding: var(--spacing-64) clamp(var(--spacing-20), 4vw, var(--spacing-32)) 0px
            clamp(var(--spacing-20), 4vw, var(--spacing-32));
        gap: clamp(var(--spacing-36), 8vw, var(--spacing-64));
        overflow: hidden;
    }

    .content {
        flex-direction: column;
        align-items: center;
        gap: clamp(40px, 8vw, 60px);
        align-self: stretch;
    }

    .footerRight {
        width: 100%;
        gap: clamp(var(--spacing-36), 8vw, var(--spacing-64));
        flex: 1 0 0;
    }

    .about {
        gap: clamp(var(--spacing-24), 4vw, var(--spacing-40));
    }

    .img {
        width: 100%;
        max-width: 756px;
        aspect-ratio: 756/151;
        flex: 1 0 0;
        padding-top: 0;
    }

    .socials {
        margin: 0;
    }
}

@media (width < 768px) {
    .container {
        width: 100%;
        padding: var(--spacing-40) var(--spacing-20) 0px var(--spacing-20);
        align-items: center;
        gap: var(--spacing-36);
        overflow: hidden;
    }

    .content {
        gap: var(--spacing-36);
    }

    .footerLeft {
        width: 335px;
        height: 504px;
        flex-shrink: 0;
    }

    .footerRight {
        width: 100%;
        align-items: flex-end;
        gap: var(--spacing-36);
    }

    .columns {
        width: 100%;
        max-width: 480px;
        align-self: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: var(--spacing-36);
    }

    .img {
        width: 335px;
        aspect-ratio: 5/1;
        flex: 1 0 0;
        gap: var(--spacing-8);
        margin-bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
        align-self: center;
    }

    .about {
        flex-direction: column-reverse;
        align-items: center;
        gap: var(--spacing-36);
    }
}

@media (width < 520px) {
    .columns {
        width: 100%;
        max-width: 480px;
    }
}