.insight {
    position: relative;
    display: grid;
    grid-template-areas:
        "date"
        "title"
        "summary";
    grid-template-rows: auto 1fr  1fr 0.25fr;
    justify-items: left;
}

.date {
    grid-area: date;
    color: var(--color-content-2);
    font-size: var(font-size-small);
}

.title {
    position: initial;
    grid-area: title;
    align-self: center;
    margin: 1rem 0;
}

.title a {
    position: initial;
    font-weight: var(--font-weight-semibold);
}

.title a::before {
    content: "";
    position: absolute;
    inset: 0;
}

.summary {
    grid-area: summary;
}

.summary p {
    opacity: 0.75;
    font-size: var(--font-size-base);
}

.grid-insights {
    --grid-columns: repeat(1, 1fr);
}

@media screen and (width >= 768px) {
    .grid-insights {
        --grid-columns: repeat(2, 1fr);
    }
}

@media screen and (width >= 1700px) {
    .grid-insights {
        --grid-columns: repeat(12, 1fr);
    }

    .grid-insights > * {
        grid-column-start: span 6;
    }

    .grid-insights > *:nth-last-child(n+3):first-child,
    .grid-insights > *:nth-last-child(n+3):first-child ~ div {
        grid-column-start: span 4;
    }

    .grid-insights > *:nth-last-child(n+4):first-child,
    .grid-insights > *:nth-last-child(n+4):first-child ~ div {
        grid-column-start: span 3;
    }
}

.grid-style-1 {
    --grid-columns: repeat(4, 1fr);
}

.grid-style-1 .title {
    font-weight: 500;
}

.grid-style-1 p {
    opacity: 0.75;
    font-size: 1rem;
}