@layer utilities {
    .contact-shell {
        @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8 lg:p-10;
    }

    .contact-shell__header {
        @apply border-b border-slate-200 pb-6;
    }

    .contact-shell__title {
        @apply text-3xl font-bold text-slate-900;
    }

    .contact-shell__subtitle {
        @apply mt-2 text-base font-medium text-slate-500;
    }

    .contact-section {
        @apply pt-7;
    }

    .contact-section__title {
        @apply border-b-2 border-primary pb-3 text-xl font-semibold text-slate-900;
    }

    .contact-grid {
        @apply mt-6 grid gap-y-8 md:grid-cols-2 md:gap-x-12;
    }

    .contact-item {
        @apply flex items-start gap-5;
    }

    .contact-item__icon {
        @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary text-xl text-white;
    }

    .contact-item__content {
        @apply min-w-0;
    }

    .contact-item__title {
        @apply text-xl font-bold text-slate-900;
    }

    .contact-item__value {
        @apply mt-1 text-base leading-7 text-slate-600;
    }
}
