body {
    margin: 1rem;
    --featured-hue: 240;
    --highlighted-hue: 270;
    --saturation: 50%;
    --lightness: 50%;

}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    grid-auto-flow: dense;
    gap: 1rem;
}

.grid__article {
    padding: 1em;
    background: #fff;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.1),
        0 20px 20px rgba(0, 0, 0, 0.05);
}

.grid__article--featured {
    background: hsl(var(--featured-hue), var(--saturation), var(--lightness));
    grid-column: 1 / -2;
}

.grid__article--featured hr {
    --lightness: 35%;
}

.grid__article--highlighted {
    background: hsl(var(--highlighted-hue), var(--saturation), var(--lightness));
    grid-column: -1 / -3;
}

.grid__article--highlighted hr {
    --lightness: 35%;
}

hr {
    height: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
}

hr:last-child {
    margin-right: 60%;
}

hr.grid__article-title {
    margin: 0.5em auto;
    width: 60%;
    height: 1em;
}

hr.grid__article-hero {
    padding-bottom: 20%;
}

@media (max-width: 680px) {
    .grid {
        display: flex;
        flex-direction: column;
    }
}