.orders-page .order-story {
    --order-padding:36px;
    --order-blend:clamp(40px, 5vw, 76px);
    position:relative;
    isolation:isolate;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
    gap:0;
    align-items:stretch;
    padding:var(--order-padding);
    margin-bottom:16px;
    border-color:#d5e2f2;
    border-radius:8px;
    background:linear-gradient(135deg, #fff, #fbfdff 68%, #edf5ff);
    box-shadow:0 10px 28px rgba(38, 73, 124, .07)
}

.orders-page .order-story-copy {
    position:relative;
    z-index:2;
    min-width:0;
    padding-right:30px
}

.orders-page .order-story:nth-of-type(even) .order-story-copy {
    padding:0 0 0 30px
}

.orders-page .order-story h2 {
    display:flex;
    align-items:center;
    min-height:44px;
    margin:-44px 0 22px 62px;
    color:#10203b;
    font-size:clamp(24px, 2vw, 31px);
    line-height:1.13;
    letter-spacing:0;
    text-wrap:balance
}

.orders-page .order-story p,
.orders-page .order-story li {
    font-size:14px;
    line-height:1.6;
    color:#53647d
}

.orders-page .order-story-copy > p:last-child {
    margin-bottom:0
}

.orders-page .order-story .section-index {
    width:44px;
    height:44px;
    border:1px solid #cce0fb;
    border-radius:7px;
    background:#eaf3ff;
    color:#1768df;
    font-size:14px;
    font-weight:800
}

.orders-page .order-story .article-callout {
    padding:20px 22px;
    margin:24px 0 0;
    border-radius:0 10px 10px 0;
    background:rgba(229, 240, 255, .7)
}

.orders-page .order-story .article-callout p {
    margin-bottom:0
}

.orders-page .order-story-illustration {
    position:relative;
    align-self:stretch;
    display:block;
    min-height:360px;
    margin:calc(-1 * var(--order-padding));
    margin-left:calc(-1 * var(--order-blend));
    padding:0;
    border-radius:0;
    overflow:hidden;
    background:linear-gradient(145deg, #fbfdff, #edf5ff);
    -webkit-mask-image:linear-gradient(to right, transparent, rgba(0, 0, 0, .45) 12%, #000 28%);
    mask-image:linear-gradient(to right, transparent, rgba(0, 0, 0, .45) 12%, #000 28%)
}

.orders-page .order-story:nth-of-type(even) .order-story-illustration {
    margin:calc(-1 * var(--order-padding));
    margin-right:calc(-1 * var(--order-blend));
    -webkit-mask-image:linear-gradient(to left, transparent, rgba(0, 0, 0, .45) 12%, #000 28%);
    mask-image:linear-gradient(to left, transparent, rgba(0, 0, 0, .45) 12%, #000 28%)
}

.orders-page .order-story-illustration > picture {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%
}

.orders-page .order-story-illustration img {
    display:block;
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
    object-fit:cover;
    object-position:center
}

@media (max-width:1100px) {
    .orders-page .order-story {
        --order-padding:28px;
        grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr)
    }

    .orders-page .order-story-copy { padding-right:22px }
    .orders-page .order-story:nth-of-type(even) .order-story-copy { padding-left:22px }
}

@media (max-width:800px) {
    .orders-page .order-story {
        --order-padding:28px;
        grid-template-columns:minmax(0, 1fr);
        gap:24px
    }

    .orders-page .order-story .order-story-copy,
    .orders-page .order-story:nth-of-type(even) .order-story-copy {
        padding:0
    }

    .orders-page .order-story .order-story-illustration,
    .orders-page .order-story:nth-of-type(even) .order-story-illustration {
        min-height:0;
        margin:0 calc(-1 * var(--order-padding)) calc(-1 * var(--order-padding));
        -webkit-mask-image:none;
        mask-image:none
    }

    .orders-page .order-story-illustration > picture {
        position:static;
        height:auto
    }

    .orders-page .order-story-illustration img { height:auto }
}

@media (max-width:520px) {
    .orders-page .order-story {
        --order-padding:22px;
        margin-bottom:16px
    }

    .orders-page .order-story h2 { font-size:25px }
}