.contact {
    background-color: rgb(var(--color-dark-gray));

    .contact-container {
        text-align: center;
        padding: var(--space-sections-s) 0;

        .contact-content {
            width: 60%;
            margin: 0 auto;
            color: rgb(var(--color-white));

            > h2 {
                font-size: var(--font-size-ml);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-m);
                margin-bottom: var(--space-8);
                margin-top: var(--space-2);
            }

            > p {
                margin-bottom: var(--space-16);
                font-size: var(--font-size-m);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-m);
            }

            > a {
                padding: var(--space-3) var(--space-12);
                text-transform: uppercase;
                color: rgb(var(--color-primary));
                background-color: rgb(var(--color-white));
                font-size: var(--font-size-s);
                font-family: var(--font-main), sans-serif;
                font-weight: var(--font-weight-bold);
                line-height: var(--line-height-m);
                border-radius: var(--border-radius-sm);
            }
        }
    }
}

@media (max-width: 820px) {
    .contact {
        .contact-container {
            padding: var(--space-sections-xs) 0;
            .contact-content {
                width: 90%;
            }
        }
    }
}