.reasons {
    --reason-brick-h: 320px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--reason-brick-h);
    gap: var(--space-4);
}

.reason-span-1 {
    grid-column: span 1;
}
.reason-span-2 {
    grid-column: span 2;
}
.reason-span-3 {
    grid-column: span 3;
}
.reason-span-4 {
    grid-column: span 4;
}

.reason {
    --accent-solid: var(--accent, var(--color-system-blue));
    --accent-light: color-mix(in srgb, var(--accent-solid) 72%, white);
    --accent-dark: color-mix(in srgb, var(--accent-solid) 82%, black);
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='3' cy='3' r='1.3' fill='white' fill-opacity='.24'/%3E%3C/svg%3E");
    --reason-ink: white;
    --reason-description-ink: color-mix(
        in srgb,
        var(--reason-ink) 78%,
        transparent
    );

    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 18% 12%,
            color-mix(in srgb, var(--accent-light) 76%, transparent) 0,
            transparent 34%
        ),
        radial-gradient(
            circle at 86% 88%,
            color-mix(in srgb, var(--accent-dark) 52%, transparent) 0,
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--accent-light),
            var(--accent-solid) 48%,
            var(--accent-dark)
        );
    border: 0;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    color: var(--reason-ink);
    display: flex;
}

.reason::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        var(--reason-pattern-image),
        linear-gradient(135deg, rgb(255 255 255 / 0.12), transparent 42%);
    background-repeat: var(--reason-pattern-repeat, repeat), no-repeat;
    background-size:
        var(--reason-pattern-size, 32px 32px),
        100% 100%;
    background-position:
        var(--reason-pattern-position, 0 0),
        0 0;
    opacity: var(--reason-pattern-opacity, 1);
}

.reason.accent-purple {
    --accent-solid: #a855f7;
}

.reason.accent-yellow,
.reason.accent-amber {
    --accent-solid: #ffc400;
}

.reason.accent-green {
    --accent-solid: #22c55e;
}

.reason.accent-blue {
    --accent-solid: #1683f5;
}

.reason.accent-pink,
.reason.accent-rose {
    --accent-solid: #ff3d5a;
}

.reason.accent-teal,
.reason.accent-mint {
    --accent-solid: #14b8a6;
}

.reason.accent-indigo {
    --accent-solid: #5b5ce2;
}

.reason.accent-orange {
    --accent-solid: #fb923c;
}

.reason-pattern-repeat::before {
    --reason-pattern-repeat: repeat;
}

.reason-pattern-no-repeat::before {
    --reason-pattern-repeat: no-repeat;
}

.reason-pattern-dots {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='3' cy='3' r='1.3' fill='white' fill-opacity='.24'/%3E%3C/svg%3E");
    --reason-pattern-size: 28px 28px;
}

.reason-pattern-lines {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cpath d='M0 31.5H24' stroke='black' stroke-opacity='.13'/%3E%3C/svg%3E");
    --reason-pattern-size: 24px 32px;
    --reason-pattern-opacity: 0.55;
}

.reason-pattern-crosshatch {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M-8 8L8-8M0 34L34 0M26 42L42 26M26-8L42 8M0 0L34 34M-8 26L8 42' stroke='white' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E");
    --reason-pattern-size: 34px 34px;
}

.reason-pattern-grid {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M40 .5H.5V40' fill='none' stroke='white' stroke-opacity='.2'/%3E%3C/svg%3E");
    --reason-pattern-size: 40px 40px;
}

.reason-pattern-habit-dots {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='white'%3E%3Ccircle cx='18' cy='18' r='9' fill-opacity='.14'/%3E%3Ccircle cx='78' cy='18' r='9' fill-opacity='.12'/%3E%3Ccircle cx='48' cy='48' r='9' fill-opacity='.16'/%3E%3Ccircle cx='18' cy='78' r='9' fill-opacity='.1'/%3E%3Ccircle cx='78' cy='78' r='9' fill-opacity='.14'/%3E%3C/g%3E%3Cg fill='none' stroke='white' stroke-opacity='.14' stroke-width='2'%3E%3Ccircle cx='48' cy='18' r='9'/%3E%3Ccircle cx='18' cy='48' r='9'/%3E%3Ccircle cx='78' cy='48' r='9'/%3E%3Ccircle cx='48' cy='78' r='9'/%3E%3C/g%3E%3C/svg%3E");
    --reason-pattern-size: 96px 96px;
    --reason-pattern-opacity: 0.7;
}

.reason-pattern-rings {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='white' stroke-opacity='.22'%3E%3Ccircle cx='130' cy='130' r='42'/%3E%3Ccircle cx='130' cy='130' r='78'/%3E%3Ccircle cx='130' cy='130' r='114'/%3E%3C/g%3E%3C/svg%3E");
    --reason-pattern-size: 260px 260px;
    --reason-pattern-position: right -54px top -54px;
}

.reason-pattern-diagonal {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M-8 32L32-8M0 40L40 0' stroke='white' stroke-opacity='.2'/%3E%3C/svg%3E");
    --reason-pattern-size: 32px 32px;
}

.reason-pattern-ticks {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='24' viewBox='0 0 46 24'%3E%3Cpath d='M1 4V20M17 10V20M33 14V20' stroke='white' stroke-opacity='.22' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --reason-pattern-size: 46px 24px;
}

.reason-pattern-nodes {
    --reason-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240' viewBox='0 0 320 240'%3E%3Cg fill='none' stroke='white' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M42 68L96 42L154 96L226 48L284 84M154 96L206 142L272 188M154 96L94 156L44 206M94 156L168 204L272 188M96 42L154 24L226 48M206 142L254 112L284 84M94 156L132 116M168 204L206 142M42 68L70 118M70 118L132 116'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.24'%3E%3Ccircle cx='42' cy='68' r='7'/%3E%3Ccircle cx='96' cy='42' r='7'/%3E%3Ccircle cx='154' cy='24' r='7'/%3E%3Ccircle cx='154' cy='96' r='8'/%3E%3Ccircle cx='226' cy='48' r='7'/%3E%3Ccircle cx='284' cy='84' r='7'/%3E%3Ccircle cx='254' cy='112' r='6'/%3E%3Ccircle cx='206' cy='142' r='7'/%3E%3Ccircle cx='272' cy='188' r='8'/%3E%3Ccircle cx='168' cy='204' r='7'/%3E%3Ccircle cx='94' cy='156' r='8'/%3E%3Ccircle cx='44' cy='206' r='7'/%3E%3Ccircle cx='70' cy='118' r='6'/%3E%3Ccircle cx='132' cy='116' r='6'/%3E%3C/g%3E%3C/svg%3E");
    --reason-pattern-size: 320px 240px;
    --reason-pattern-position: right 22px top 18px;
    --reason-pattern-opacity: 0.72;
}

.reason.accent-yellow,
.reason.accent-orange,
.reason.accent-amber,
.reason.accent-cyan {
    --reason-ink: color-mix(in srgb, var(--accent-solid) 18%, black);
}

.reason-text-top {
    flex-direction: column;
}
.reason-text-bottom {
    flex-direction: column-reverse;
}
.reason-text-left {
    flex-direction: row;
}
.reason-text-right {
    flex-direction: row-reverse;
}

.reason-head {
    position: relative;
    z-index: 1;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: 0;
}

.reason-text-left .reason-head,
.reason-text-right .reason-head {
    flex: 0 0 38%;
    align-self: center;
}

.reason-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-title-2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--reason-ink);
}

.reason-description {
    margin: 0;
    color: var(--reason-description-ink);
    font-size: var(--text-subhead);
    line-height: var(--leading-snug);
    max-width: 38ch;
}

.reason-image {
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    margin: var(--space-4);
    border-radius: var(--radius-xl);
}

.reason-text-top .reason-image {
    margin-top: 0;
}

.reason-text-bottom .reason-image {
    margin-bottom: 0;
}

.reason-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.reason-text-left .reason-image img,
.reason-text-right .reason-image img {
    object-position: top center;
}

@media (max-width: 900px) {
    .reasons {
        --reason-brick-h: 280px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .reason-span-1 {
        grid-column: span 1;
    }
    .reason-span-2,
    .reason-span-3,
    .reason-span-4 {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .reasons {
        --reason-brick-h: 260px;
        grid-template-columns: 1fr;
    }
    .reason-span-1,
    .reason-span-2,
    .reason-span-3,
    .reason-span-4 {
        grid-column: 1 / -1;
    }
    .reason-text-left,
    .reason-text-right {
        flex-direction: column;
    }
    .reason-text-left .reason-head,
    .reason-text-right .reason-head {
        flex: 0 0 auto;
        align-self: stretch;
    }
}