$colors: (
    var(--rocket-color-green-100),
    #FCC615,
    #76BCE1
);

.hero-links {
    &__list {
        @include list-reset;

        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    &__item {
        @include size(calc(100% / 3), 100%);

        display: block;

        @for $i from 1 through length($colors) {
            &:nth-child(#{$i}) .hero-link {
                background-color: nth($colors, $i);

                @include event {
                    background-color: var(--rocket-color-secondary-100);
                    color: var(--rocket-color-white-base);

                    .hero-link__icon {
                        transform: translateX(10px);
                    }
                }
            }
        }
    }
}

.hero-link {
    @include transition;

    align-items: center;
    color: var(--rocket-color-black-base);
    display: flex;
    font-family: var(--rocket-font-tertiary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    gap: 25px;
    height: 52px;
    justify-content: center;
    padding: 10px;
    text-decoration: none;
    text-align: center;

    @include breakpoint(lg) {
        @include size(100%, 82px);

        font-size: 1.65rem;
    }

    &__icon {
        @include transition;
        @include size(32px);

        align-items: center;
        display: none;
        justify-content: center;

        @include breakpoint(lg) {
            display: flex;
        }

        svg {
            @include size(1em);

            display: block;
            color: inherit;
            fill: currentColor;
        }
    }
}