@layer pages {

    .contacts {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-5);
    }

    .contacts__card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info    map"
            "actions map-link";
        gap: var(--space-3);
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        padding: var(--space-4);
        background: var(--color-bg);
    }

    .contacts__card-info {
        grid-area: info;
        display: flex;
        flex-direction: column;
    }

    .contacts__card-actions {
        grid-area: actions;
        display: flex;
        gap: var(--space-2);
    }

    .contacts__card-map {
        grid-area: map;
        overflow: hidden;
        border-radius: var(--radius);

        iframe {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }

    .contacts__card-map-link {
        grid-area: map-link;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        align-self: center;
        gap: var(--space-2);
        color: var(--color-brand);
    }

    .container-with-divider {
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border);
    }

    @media (max-width: 48rem) {
        .contacts__card {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "info"
                "actions"
                "map"
                "map-link";
            padding: var(--space-3);
        }

        .contacts__card-actions {
            flex-direction: column;
        }

        .contacts__card-map {
            aspect-ratio: 4 / 3;
        }

        .contacts__card-map-link {
            justify-content: center;
        }
    }
}