.lawn-support {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    grid-template-areas: "plot copy action";
    gap: 1.5rem 2.5rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-block: 1px solid var(--thelawn-line);
    background: #f2dfce;
    scroll-margin-top: 1rem;
}

.lawn-support__plot {
    grid-area: plot;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .15rem;
    aspect-ratio: 1;
    padding: .3rem;
    border: 1px solid #8c9f82;
}
.lawn-support__plot span { background: #cbd7bf; border: 1px solid #fbf7ef; }
.lawn-support__plot span:nth-child(3n) { background: #a9bc9d; }
.lawn-support__plot .is-selected { background: var(--thelawn-accent); outline: 2px solid var(--thelawn-accent); outline-offset: 1px; }
.lawn-support__copy { grid-area: copy; min-width: 0; }
.lawn-support__copy h2 {
    max-width: 34ch;
    margin: 0 0 .625rem;
    color: var(--thelawn-ink);
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    line-height: 1.15;
    text-wrap: balance;
}
.lawn-support__copy h2 span { display: block; }
.lawn-support__copy p { max-width: 62ch; margin: 0; line-height: 1.5; }
.lawn-support__action { grid-area: action; text-align: center; }
.lawn-support__action a {
    display: inline-flex;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    background: #234229;
    color: #fbf7ef;
    border: 3px double #eef2e7;
    outline: 1px solid #234229;
    border-radius: .125rem;
    font-weight: 700;
    text-decoration: none;
}
.lawn-support__action a:hover { background: #355c3c; color: #fbf7ef; }
.lawn-support__action a:focus-visible { outline: 3px solid var(--thelawn-focus); outline-offset: 3px; }
.lawn-support__action p {
    margin: .25rem 0 0;
    color: var(--thelawn-muted);
    font-family: system-ui, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
}
.lawn-support__action .lawn-support__price { margin-top: .75rem; color: #234229; font-family: inherit; font-size: 1rem; }
.lawn-support--article_support { width: min(100%, 68rem); margin: clamp(2rem, 5vw, 4rem) auto 0; }

@media (max-width: 56rem) {
    .lawn-support {
        grid-template-columns: 3rem minmax(0, 1fr);
        grid-template-areas: "plot title" "body body" "action action";
        gap: 1rem;
    }
    .lawn-support__copy { display: contents; }
    .lawn-support__copy h2 { grid-area: title; margin: 0; }
    .lawn-support__copy p { grid-area: body; }
    .lawn-support__action { min-width: 0; text-align: left; }
    .lawn-support__action a { width: 100%; }
}