@layer genr.component {
    .downloads {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: var(--width-lg);
        margin: 1rem auto;
        padding-block: 4rem;
        padding-inline: 1.5rem;

        @media (width > 1280px) {
            gap: 2.5rem;
            padding-inline: 0;
        }
    }

    .downloads__header {
        .headline {
            color: var(--color-light-patrol);
            font-weight: 700;
        }
    }

    .downloads__items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .downloads__item {
        border-bottom: 1px solid var(--color-border);
    }

    .downloads__link {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        padding-block: 1rem;
        text-decoration: none;

        @media (width > 576px) {
            align-items: center;
            justify-content: flex-start;
            flex-direction: row;
        }

        &:hover,
        &:focus {
            .underline-animation {
                --color-link-underline: var(--color-signal-violet);

                hyphens: auto;
                background-position: 50% calc(100% - 0.625rem), 0% calc(100% - 0.75rem);
                background-size: 100% 0.125rem, 100% 1.25rem;
            }

            .button {
                background-color: var(--color-signal-violet-hover);
                border-color: var(--color-signal-violet-hover);
            }
        }
    }

    .downloads__meta {
        display: flex;
        gap: 0.5rem;
        margin-top: -1.25rem;
        white-space: nowrap;
        opacity: 0.6;

        @media (width > 576px) {
            margin-left: auto;
        }
    }
}