.fc_gradient_box_links {
    padding: var(--gap-s);
}

.fc_gradient_box_links .the_links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-s);
}

.fc_gradient_box_links .the_links .the_link {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.07;
    background: center / cover no-repeat;
    position: relative;
    isolation: isolate;
    transition: .3s;
    text-decoration: none;
}

.fc_gradient_box_links .the_links .the_link:before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary);
    transition: 0.3s;
    opacity: 0.4;
    z-index: -1;
}

.fc_gradient_box_links .the_links .the_link:hover:before {
    opacity: 0.7;
}

.fc_gradient_box_links .bg_primary .button.outline:hover {
    color: var(--white);
    border-color: var(--secondary);
}


.fc_gradient_box_links .bg_primary .button.outline:before, .fc_gradient_box_links .bg_primary .button.outline:after {
    background: var(--secondary);
}

@media (max-width: 800px) {
    .fc_gradient_box_links .the_links.grid_4 .the_link {
        flex-basis: calc(50% - var(--gap-s));
    }
    .fc_gradient_box_links .bg_primary .button.outline {
        width: min-content;
    }

}

@media (max-width: 640px) {
    .fc_gradient_box_links .the_links.grid_4 .the_link,
    .fc_gradient_box_links .the_links .the_link {
        flex-basis: 100%;
    }
}

@media (max-width: 450px) {
    .fc_gradient_box_links .button {
        min-width: 0;
        box-sizing: border-box;
    }
}