.ew-section {
    padding: 80px 0
}

.ew-section--compact {
    padding: 56px 0
}

.ew-section--rule {
    border-top: 1px solid var(--ew-rule)
}

.ew-section--dark {
    margin-inline: 24px;
    padding: 56px 24px;
    border-radius: 8px;
    background: var(--ew-ink);
    color: var(--ew-paper);
    text-align: center
}

.ew-section--dark a {
    color: var(--ew-paper)
}

.ew-section__heading {
    margin: 0 0 24px;
    font-family: var(--ew-display);
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    font-variation-settings: "opsz" 96, "wdth" 94;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em
}

.ew-grid {
    display: grid;
    gap: 24px
}

.ew-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.ew-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.ew-card {
    display: flex;
    padding: 32px;
    border: 1px solid var(--ew-rule);
    border-radius: 16px;
    background: var(--ew-rule);
    color: var(--ew-ink);
    flex-direction: column;
    text-decoration: none;
    transition: border-color .2s
}

.ew-card:hover {
    border-color: var(--ew-accent)
}

@media(max-width:760px) {
    .ew-section {
        padding: 56px 0
    }

    .ew-section--dark {
        margin-inline: 20px
    }

    .ew-grid--2,
    .ew-grid--3 {
        grid-template-columns: 1fr
    }

    .ew-card {
        padding: 24px
    }
}