.download-entry {
    display: grid;
    gap: 1.5rem;
    /* 24px → 32px */
    padding-block-end: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    border-block-end: 1px solid var(--sav-color-dunkelblau);

    /* `[hidden]` is a user agent rule and loses to the author `display` above. */
    &[hidden] {
        display: none;
    }

    @media (min-width: 64rem) {
        /* Three columns and a gutter of the page grid, where the design starts the text. */
        &:has(.download-entry__image) {
            grid-template-columns: 19.6875rem minmax(0, 1fr);
            column-gap: var(--sav-grid-gutter);
        }
    }
}

/* 257.5px, three of the four narrow columns — the design keeps the picture at that size
   on a wide screen too, where it no longer fills the three columns beside the text. */
.download-entry__image {
    inline-size: min(100%, 16.09375rem);
    border-radius: var(--sav-radius);
}

.download-entry__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.download-entry__overline,
.download-entry__title,
.download-entry__description {
    margin: 0;
}

/* The three steps below run without tracking, which the document otherwise passes down. */

/* One size across both frames of the design. */
.download-entry__overline {
    font-size: 1rem;
    line-height: 1.625rem;
    letter-spacing: normal;
}

/* 22 → 30px, a size of its own between the steps of the shared scale. */
.download-entry__title {
    font-weight: var(--sav-font-weight-light);
    font-size: clamp(1.375rem, 1.2364rem + 0.5913vw, 1.875rem);
    line-height: var(--sav-text-l-line);
    letter-spacing: normal;
    color: var(--sav-color-dunkelblau);
}

/* Adds to the gap above for the 16px the design sets here. The width is capped at the eight
   columns the design gives the description, which only shows itself on an entry without a
   picture — beside one, the text column is already narrower than the cap. */
.download-entry__description {
    max-inline-size: min(100%, 55.5625rem);
    margin-block-start: 0.75rem;
    font-weight: var(--sav-font-weight-light);
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    letter-spacing: normal;
}

.download-entry__downloads {
    display: flex;
    flex-direction: column;
    /* 24px → 32px */
    gap: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    margin-block: 1.25rem 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}