.up-grid {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: var(--up-grid-gap, 32px);
    padding: var(--up-grid-padding, 32px);



    .banner-with-text {
        /* Fallback aspect ratio height (e.g., 4:3 => 75%) */
        --slide-height: 75%;
        width: 100%;
        height: auto;
    }

    .banner-with-text__content-box {
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        align-items: center;

        & p,
        & h2,
        & button,
        & a {
            color: white !important;
            text-align: center;
            margin: 0 !important;
        }
    }

    .banner-with-text__image-block {}

    /* Keep image as background: image stays absolute in component CSS.
       Here we only ensure the container establishes height via ::after. */
}

/* Responsive behavior driven by section setting (written inline on container) isn't possible in static CSS.
   Use a reasonable default: stack below 768px, two columns above. */
@media (max-width: 768px) {
    .up-grid {
        grid-template-columns: 1fr;

        a.button {
            min-height: unset !important;
            padding: 10px 20px !important;
            font-size: 12px !important;
        }
    }
}

@media (min-width: 769px) {
    .up-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Desktop: make banners square with 80vh height */
    .up-grid .banner-with-text {
        height: 86vh;
        width: 100%;
    }

    .up-grid .banner-with-text::after {
        padding-bottom: 0;
    }

    .banner-with-text__image-block img {
        /* aspect-ratio: 1 / 1; */
        height: 95vh !important;
    }
}



.up-grid>* {
    justify-self: center;
    align-self: center;
    width: 100%;
}

/* UP Grid: Tertiary button hover - white background + theme glow */
.up-grid .button.button--tertiary:not(.button[aria-disabled=true]):hover,
.up-grid .banner-with-text .button.button--tertiary:not(.button[aria-disabled=true]):hover {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
}