@layer genr.component {
    .related-links {
        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;
        }
    }

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

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

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

    .related-links__link {
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
        padding-block: 1rem;
        text-decoration: none;

        &:hover,
        &:focus {
            .underline-animation {
                --color-link-underline: var(--color-signal-violet);
                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);
            }
        }
    }
}