.contact-component {
    --contact-heading-margin-bottom: 0;
    --contact-heading-row-gap: 0.5rem;
    --contact-card-row-gap: 1rem;
    padding: 5rem 0
}

@media print,screen and (min-width: 48em) {
    .contact-component {
        --contact-card-row-gap: 1.5rem
    }
}

@media print,screen and (min-width: 90em) {
    .contact-component {
        --contact-card-row-gap: 1.25rem;
        --contact-heading-row-gap: 1rem
    }
}

.contact-component--multi-cards {
    --contact-heading-margin-bottom: 2rem
}

@media print,screen and (min-width: 48em) {
    .contact-component--multi-cards {
        --contact-heading-margin-bottom: 2.5rem
    }
}

@media print,screen and (min-width: 90em) {
    .contact-component--multi-cards {
        --contact-heading-margin-bottom: 3rem
    }
}

.contact-component__card {
    background-color: #f9f9f9;
    border-radius: 0.5rem;
    gap: 2rem;
    min-width: 316px;
    padding: 1.5rem
}

.contact-component__card-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

    .contact-component__card-details a {
        color: #014c8b
    }

.contact-component__card-details__item {
    align-items: center;
    display: flex;
    gap: 0.5rem
}

    .contact-component__card-details__item:last-child {
        align-items: flex-start
    }

.contact-component__cta-section-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem
}

@media print,screen and (min-width: 48em) {
    .contact-component__cta-section-wrapper {
        margin-top: 2rem
    }
}

@media print,screen and (min-width: 90em) {
    .contact-component__cta-section-wrapper {
        margin-top: 2.5rem
    }
}

.contact-component__cta-section-wrapper .cta {
    margin: 0;
    width: unset
}

    .contact-component__cta-section-wrapper .cta::after {
        content: unset
    }

.contact-component__heading {
    gap: var(--contact-heading-row-gap);
    margin-bottom: calc(var(--contact-heading-margin-bottom) - var(--contact-card-row-gap))
}

.contact-component__title {
    font-weight: 400
}

.contact-component .grid-x {
    row-gap: var(--contact-card-row-gap)
}

.contact-component--white {
    background-color: #fff
}