@layer genr.component {
    .contact__background {
        background: var(--color-dark-green);
    }

    .contact {
        max-width: 75rem;
        margin: 0 auto;
        padding: 4rem 1.5rem 4.5rem;
        color: var(--color-white);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        @media (width > 1280px) {
            gap: 2.5rem;
            padding: 7.5rem 0 8rem 0;
        }
    }

    .contact__header {
        color: var(--color-light-patrol);

        .headline {
            font-weight: 700;
        }
    }

    .contact__list {
        display: flex;
        flex-direction: column;
    }

    .contact__item {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 1.75rem;
        padding: 2.5rem 0;
        border-bottom: 1px solid var(--color-border);

        @media (width > 576px) {
            flex-direction: row;
        }
    }

    .contact__media {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 5rem;
        border-radius: 100%;
        overflow: hidden;
        flex-shrink: 0;
        background-color: var(--color-border);

        .image {
            width: 100%;
        }

        .image__media {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .icon {
            opacity: 0.5;
        }
    }

    .contact__content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1;
    }

    .contact__name {
        font-weight: 700;
        font-size: 1.25rem;
    }

    .contact__position {
        font-weight: 400;
        font-size: 1rem;
    }

    .contact__link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 700;
        font-size: 18.5px;
        line-height: 24px;
        width: fit-content;
        text-decoration: none;
    }

    .contact__link svg {
        fill: var(--color-signal-violet);
        pointer-events: none;
        transition: transform 0.2s ease, fill 0.2s ease;
    }

    .contact__link:hover svg {
        transform: translateX(0.25em);
    }

    .contact__actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
}