.fcm-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 3rem;
    align-items: start;
}

.fcm-items--1 {
    grid-template-columns: 1fr;
    max-width: 50%;
}

.fcm-items--2 {
    grid-template-columns: repeat(2, 1fr);
}

.fcm-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.fcm-item__heading {
    color: #faba5f;
    font-family: "Alata", sans-serif;
    margin: 0;
}

.fcm-item__btn {
    margin-top: auto;
}

/* Dividers between columns */
.fcm-items--2 .fcm-item:not(:last-child),
.fcm-items--3 .fcm-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding-right: 3rem;
}

@media (max-width: 767px) {
    /*
     * On mobile the absolute+translateY(-50%) pattern needs margin-top >= half the
     * CTA box height both in the section above AND in the footer below. A tall
     * multi-item block easily exceeds the theme's fixed 140px on both sides.
     * Solution: drop the float on mobile and let the section flow normally.
     */
    .footer-section--multi {
        margin-top: 0;
    }

    .footer-section--multi .footer-cta {
        position: static;
        transform: none;
        width: auto;
        z-index: auto;
    }

    /* The theme footer's margin-top exists to clear the floating CTA bottom half.
       When the float is gone, that gap is unnecessary. */
    .footer-section--multi + footer.footer-section {
        margin-top: 0;
    }

    .fcm-items,
    .fcm-items--1,
    .fcm-items--2 {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 2.5rem;
    }

    .fcm-items--2 .fcm-item:not(:last-child),
    .fcm-items--3 .fcm-item:not(:last-child) {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 2.5rem;
    }

    .fcm-item__btn .button {
        width: 100%;
        justify-content: center;
    }
}