.intro-area-wrapper {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Stacked (below 992px): no divider, no side padding */
.intro-area-wrapper .left-intro-area,
.intro-area-wrapper .right-intro-area {
    padding-left: 0;
    padding-right: 0;
    border: 0;
}

/* The card responds to the width of its own column */
.intro-area-wrapper .right-intro-area {
    container-type: inline-size;
}

.intro-area-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--bs-white);
    border-radius: var(--bs-border-radius);
}

.intro-area-card__media,
.intro-area-card__body {
    min-width: 0;
}

.intro-area-button {
    margin-top: 1.5rem;
    padding-inline: 1rem;
}

.intro-area-card__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-sm);
}

.intro-area-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-wrap: anywhere;
}

.intro-area-card-button {
    margin-top: 1.5rem;
    padding-inline: 1rem;
}

/* Card is wide enough: image and text side by side */
@container (min-width: 540px) {
    .intro-area-card {
        flex-direction: row;
        gap: 2rem;
        padding: 2rem;
    }

    .intro-area-card__media {
        flex: 0 0 45%;
    }

    .intro-area-card__body {
        flex: 1 1 0;
    }
}

/* Desktop: two columns with a divider */
@media (min-width: 992px) {
    .intro-area-wrapper {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .intro-area-wrapper .left-intro-area {
        padding-right: 2.5rem;
        border-right: 1px solid var(--bs-border-color);
    }

    .intro-area-wrapper .right-intro-area {
        padding-left: 2.5rem;
    }
}