.textWithButton {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: transparent;
}

.textWithButton_Inner {
    --twb-col-gap: clamp(2rem, 5vw, 3.5rem);
    box-sizing: border-box;
    width: 100%;
    max-width: min(1680px, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    padding-top: clamp(1rem, 3vw, 2rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--twb-col-gap);
    container-type: inline-size;
    container-name: text-with-button;
}

.textWithButton_Column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 min(100%, 320px);
    /* 35cqw = 35% of inner (query container); 35% fallback if cqw is not supported */
    max-width: 35%;
    max-width: min(35cqw, 100%);
    width: 100%;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    min-width: 0;
}

.textWithButton_Body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    min-width: 0;
    width: 100%;
}

/* One item: image + copy in one row, same total width as two dual columns (images line up) */
.textWithButton--single .textWithButton_Column {
    flex-direction: row;
    align-items: flex-start;
    flex: 0 1 auto;
    /* Same span as two columns + column gap (aligns with two-up blocks) */
    max-width: min(100%, calc(70% + var(--twb-col-gap)));
    max-width: min(100%, calc(70cqw + var(--twb-col-gap)));
    width: 100%;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.textWithButton--single .textWithButton_Image {
    /* ~50% of row ≈ 35% of inner when row is capped at ~70% + gap (cqw overrides below) */
    flex: 0 0 50%;
    max-width: 50%;
    flex: 0 0 35cqw;
    max-width: min(35cqw, 100%);
    min-width: 0;
    width: auto;
    align-self: flex-start;
}

.textWithButton--single .textWithButton_Image img {
    width: 100%;
}

.textWithButton--single .textWithButton_Body {
    flex: 1 1 0;
    width: auto;
}

.textWithButton_Image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.textWithButton_Image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid #A3B199;
    aspect-ratio: 80 / 51;
}

.textWithButton_Header {
    margin: 0;
    color: #A0B297;
    font-family: "WixMadeforText", "Raleway", system-ui, sans-serif;
    font-size: clamp(2.975rem, 4vw, 2.75rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
    text-align: left;
    text-wrap: balance;
}

.textWithButton_Text {
    color: #FFF;
font-family: Inter;
font-size: clamp(0.9375rem, 0.35vw + 0.82rem, 1.6875rem);
font-style: normal;
font-weight: 400;
line-height: 32px; /* 133.333% */
margin: 0;
}

.textWithButton_Text p {
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

.textWithButton_Text p + p {
    margin-top: 1em;
}

.textWithButton_Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    padding: 14px 28px;
    border-radius: 999px;
    background-color: #a3b199;
    color: #1a1a1a;
    font-family: "WixMadeforText", "Raleway", system-ui, sans-serif;
    font-size: clamp(0.875rem, 0.15vw + 0.8rem, 1rem);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textWithButton_Button:hover {
    background: #79896D;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.42) inset, 3px 3px 10px 0 rgba(255, 255, 255, 0.20);
}

.textWithButton_Button:focus-visible {
    outline: 2px solid #f9b000;
    outline-offset: 3px;
}

/* Tablet and down: stack columns, comfortable reading width; desktop layout unchanged above 900px */
@media (max-width: 1025px) {
    .textWithButton_Inner {
        flex-direction: column;
        align-items: center;
        padding-inline: clamp(1rem, 3vw, 2rem);
        padding-top: clamp(1.25rem, 3vw, 2rem);
        padding-bottom: clamp(2rem, 4vw, 3rem);
        gap: clamp(2.25rem, 5vw, 3rem);
    }

    .textWithButton_Column {
        flex: 1 1 100%;
        max-width: min(640px, 100%);
        width: 100%;
    }

    .textWithButton--single .textWithButton_Column {
        flex-direction: column;
        align-items: center;
        max-width: min(640px, 100%);
    }

    .textWithButton--single .textWithButton_Image {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .textWithButton_Text {
        width: 100%;
        max-width: 100%;
    }
}

/* Phone: tighter spacing, fluid type, full-width tap target for button */
@media (max-width: 480px) {
    .textWithButton_Inner {
        padding-inline: clamp(1rem, 4vw, 1.25rem);
        padding-top: clamp(1rem, 4vw, 1.5rem);
        padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
        gap: clamp(1.75rem, 5vw, 2.5rem);
    }

    .textWithButton_Column {
        max-width: 100%;
        gap: clamp(0.875rem, 3vw, 1.25rem);
    }

    .textWithButton_Text {
        line-height: 1.55;
    }

    .textWithButton_Button {
        align-self: stretch;
        max-width: 100%;
        padding-block: 14px;
        padding-inline: 20px;
    }
}