.link-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;

    .link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        font: var(--anresis-font-link-list-link);

        &:not(:has(.link-title)) {
            grid-template-columns: minmax(0, 1fr);
        }

        .link-title {
            padding: var(--anresis-spacing-4);
            padding-inline-end: var(--anresis-spacing-8);
            text-transform: uppercase;
            background-color: var(--anresis-color-secondary-background);
            color: var(--anresis-color-white-text);
        }

        .link-text {
            padding: var(--anresis-spacing-4);
            padding-inline-end: var(--anresis-spacing-8);
            background-color: var(--anresis-color-grey-2-background);
            color: var(--anresis-color-secondary-text);
            position: relative;

            > img {
                position: absolute;
                width: 20px;
                height: 24px;
                object-fit: contain;
                inset-inline-end: var(--anresis-spacing-4);
                inset-block-start: 50%;
                transform: translateY(-50%);
                filter: var(--anresis-color-primary-filter);
            }
        }

        &:hover {
            .link-title {
                background-color: var(--anresis-color-primary-background);
            }

            .link-text {
                background-color: var(--anresis-color-grey-6-background);
            }
        }

        @media (max-width: 767px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}