/* vn-relief-band — Business "Big Stress Relief for Families"
   Source: Rest of pages/Responsive/Down to business (.b-relief): #f7f9fd band, 12px radius, inset 59px
   on the left and running off the right edge; three pills with #C7DAF0 rules; #dce8f6 quote card
   overlapping a photo that runs past the frame. */

.vn-relief-wrap {
    overflow: hidden;
    padding: 0 0 0 min(3.07vw, 59px);
    font-family: var(--vn-font-body);
    color: var(--vn-navy);
}

.vn-relief {
    --vn-relief-rule: #C7DAF0;
    --vn-relief-icon: min(5.55vw, 107px);
    display: grid;
    grid-template-columns: minmax(0, 428fr) minmax(0, 887fr) minmax(0, 539fr);
    align-items: center;
    max-width: 1924px;
    margin-right: calc(-1 * min(0.68vw, 13px));
    padding: min(1.8vw, 35px) 0 min(1.35vw, 26px) min(1.87vw, 36px);
    background-color: #F7F9FD;
    border-radius: 12px 0 0 12px;
    color: inherit;
}

.vn-relief > * { min-width: 0; }

.vn-relief .vn-relief__heading {
    margin: 0;
    font-family: var(--vn-font-display);
    font-size: min(1.83vw, 35.19px);
    font-weight: 500;
    line-height: 1.29;
    white-space: nowrap; /* runs past its column on desktop, like the mockup */
    color: inherit;
}

.vn-relief .vn-relief__kicker {
    margin: min(0.4vw, 8px) 0 0;
    font-size: min(1.2vw, 23.09px);
    font-weight: 600;
    line-height: 1.28;
}

.vn-relief .vn-relief__text {
    max-width: min(19.8vw, 380px);
    margin: min(1vw, 20px) 0 0;
    font-size: min(1.41vw, 27.09px);
    font-weight: 400;
    line-height: 1.348;
}

.vn-relief__items {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-self: center;
}

.vn-relief__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 min(0.8vw, 16px);
    text-align: center;
}

.vn-relief__item + .vn-relief__item { border-left: 2px solid var(--vn-relief-rule); }

.vn-relief .vn-relief__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: var(--vn-relief-icon);
    margin-bottom: min(2.3vw, 45px);
    color: #113E8E;
}

.vn-relief__icon svg { display: block; width: auto; max-width: 100%; height: 100%; fill: currentColor; }
.vn-relief__icon i { font-size: calc(var(--vn-relief-icon) * 0.8); }

.vn-relief .vn-relief__item-title {
    margin: 0 0 min(1.4vw, 27px);
    font-family: var(--vn-font-body);
    font-size: min(1.41vw, 27.09px);
    font-weight: 600;
    line-height: 0.83;
    letter-spacing: 0.02em;
    color: inherit;
}

.vn-relief .vn-relief__item-text {
    margin: 0;
    font-size: min(1.41vw, 27.09px);
    font-weight: 400;
    line-height: 1.163;
}

/* Quote card sits over the left edge of its photo */
.vn-relief .vn-relief__quote {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 290fr) minmax(0, 249fr);
    align-items: stretch;
    min-height: min(19.9vw, 382px);
    margin: 0 0 0 min(0.65vw, 12.5px);
}

.vn-relief__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55.1%;
    overflow: hidden;
}

.vn-relief__photo .vn-img-cover {
    position: absolute;
    inset: 0;
    object-position: var(--vn-img-x, 30%) var(--vn-img-y, 50%);
}

.vn-relief__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: min(1.5vw, 29px) min(1.2vw, 22px) min(1.3vw, 24px) min(1vw, 19px);
    background-color: #DCE8F6;
    border-radius: 21px;
}

.vn-relief__mark {
    display: block;
    height: min(1vw, 19px);
    font-family: var(--vn-font-display);
    font-size: min(3.24vw, 62.19px);
    font-weight: 500;
    line-height: 0.65;
}

.vn-relief .vn-relief__quote-text {
    margin: 0 0 0 min(1.45vw, 28px);
    padding: 0;
    border: none;
    font-family: var(--vn-font-display);
    font-size: min(1.1vw, 21.19px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.32;
    color: inherit;
}

.vn-relief .vn-relief__ornament {
    display: block;
    width: min(7.7vw, 148px);
    height: auto;
    margin: min(0.4vw, 8px) 0 0 auto;
}

.vn-relief__cite {
    margin-top: auto;
    font-size: min(0.94vw, 18.09px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.74;
    text-align: center;
}

@media (max-width: 1024px) {
    .vn-relief-wrap { padding: 48px 32px 0; overflow: visible; }
    .vn-relief {
        --vn-relief-icon: 64px;
        grid-template-columns: 1fr;
        margin: 0;
        padding: 30px 24px;
        border-radius: 14px;
    }
    .vn-relief .vn-relief__heading { font-size: clamp(1.6rem, 3.8vw, 2.2rem); line-height: 1.2; white-space: normal; }
    .vn-relief .vn-relief__kicker { margin-top: 8px; font-size: clamp(1rem, 1.9vw, 1.15rem); line-height: 1.35; }
    .vn-relief .vn-relief__text { max-width: 62ch; margin-top: 12px; font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.45; }
    .vn-relief__text br,
    .vn-relief__item-text br { display: none; }

    .vn-relief__items { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
    .vn-relief__item { gap: 8px; padding: 0; }
    .vn-relief__item + .vn-relief__item { border-left: none; }
    .vn-relief .vn-relief__icon { margin-bottom: 0; }
    .vn-relief .vn-relief__item-title { margin: 6px 0 0; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.25; }
    .vn-relief .vn-relief__item-text { font-size: clamp(0.98rem, 1.8vw, 1.15rem); line-height: 1.4; }

    .vn-relief .vn-relief__quote {
        grid-template-columns: 1.25fr 1fr;
        min-height: 0;
        margin: 32px 0 0;
        overflow: hidden;
        border-radius: 18px;
        background-color: #DCE8F6;
    }
    .vn-relief__photo { position: relative; grid-column: 2; grid-row: 1; width: auto; min-height: 280px; }
    .vn-relief__card { grid-column: 1; grid-row: 1; padding: 26px 26px 24px; border-radius: 0; }
    .vn-relief__mark { height: auto; margin-top: 8px; font-size: 3.4rem; line-height: 0.7; }
    .vn-relief .vn-relief__quote-text { margin: 6px 0 0; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5; }
    .vn-relief .vn-relief__ornament { width: 120px; margin: 18px 0 8px; }
    .vn-relief__cite { font-size: 0.95rem; line-height: 1.3; text-align: left; }
}

@media (max-width: 767px) {
    .vn-relief-wrap { padding: 40px 12px 0; }
    .vn-relief { padding: 26px 18px; }
    .vn-relief__items { grid-template-columns: 1fr; gap: 26px; }
    .vn-relief .vn-relief__quote { grid-template-columns: 1fr; }
    .vn-relief__photo { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 16 / 10; }
    .vn-relief__card { grid-column: 1; grid-row: 2; }
}