.tns-ovh {
    margin-right: -1rem;
}

.at-relationListSlider__content .ro-relations-cards {
    display: flex ;
}

.tns-slider.ro-relations.--card {
    display: flex;
    gap: var(--marginSmall);

    & .ro-relations__item {
        display: grid;
        gap: var(--marginExtraSmall);
        padding: var(--marginSmall);
        width: 100% !important;
        box-shadow: none;
        border: 1px solid var(--baseLight300);
    }

    & .ro-relations__item:has(.ro-relations-cards__img) {
        grid-template-columns: 65px 1fr;
    }

    & .ro-relations__item,
    & .ro-relations-cards__button {
        text-align: left;
    }

    & .ro-relations__item:has(.ro-relations-cards__button):hover {
        background-color: var(--primaryColor100);
    }

    & .ro-relations-cards__wrapper {
        padding: 0;
    }

    & .ro-relations__item:has(.ro-relations-cards__button):hover .ro-relations-cards__button {
        color: inherit;
    }

    & .ro-relations-cards__figure {
        padding: 0;
    }

    & .ro-relations-cards__img {
        width: 65px;
        scale: none;
        transition: none;
    }

    & .ro-relations-cards__figure:not(:has(.ro-relations-cards__img)) {
        display: none;
    }
}

@media (max-width: 767px) {
    .tns-slider.ro-relations.--card .ro-relations__item {
        grid-template-columns: 1fr !important;
        align-content: flex-end;
    }
}

/*
 * Navigation (dots)
 */

.tns-nav > [aria-controls] {
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0 5px;
    border-radius: 50%;
    background: var(--baseLight400);
    border: 0;
}

.tns-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--marginSmall);
    margin-top: var(--marginSmallMedium);
}

.tns-nav > .tns-nav-active {
    background: var(--primaryColor500);
}

/*
 * Controls (prev/next)
 */

.tns-controls {
    display: flex;
    justify-content: flex-end;
}

/* autplay start/stop button */
.tns-outer > button {
    display: none !important;
}

button[data-controls="prev"],
button[data-controls="next"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 1rem;
    text-indent: -999em;
    background-color: transparent;
    border-color: var(--baseDark900);
}

button[data-controls="prev"]:hover,
button[data-controls="next"]:hover {
    border-color: var(--_buttonBackgroundColorHover);
    background-color: var(--_buttonBackgroundColorHover);
}

button[data-controls="prev"]::after,
button[data-controls="next"]::after {
    content: '\e801';
    text-indent: 0;
    font-family: var(--iconFont);
}

button[data-controls="next"]::after {
    content: '\e802';
}