.ltx-grid{
 display: grid;
 grid-template-rows: 50px 1fr 50px;
 font-family: "Frank Ruhl Libre", serif;
}

.container {
    display: inline-block;
    width: 95%;
    height: 420px;
    overflow-x: hidden;
    position: relative; /* Position relative pour permettre le positionnement absolu des boutons */
    left: 2.5%;
}

.items-container{
    display: inline-block;
    width: 90%;
    white-space: nowrap;
    touch-action: none;
    overflow-x: hidden;
}

button.scrollButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: black;
    border: none;
    font-size: 1.5em;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}
.scrollButton {
    background-color: #ffffff;
    color: #333333;
    border: 2px solid #cccccc;
    border-radius: 50%;
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    line-height: 40px; /* Centrer le texte verticalement */
    text-align: center; /* Centrer le texte horizontalement */
    cursor: pointer;
    transition: all 0.3s ease; /* Animation de transition fluide */
}

.scrollButton:hover {
    background-color: #f2f2f2;
    border-color: #999999;
    color: #666666;
}

button.scrollLeftButton {
    left: 0px;
}

button.scrollRightButton {
    right: 0px;
}

.more-ltx{
    display: inline-block;
    width: 175px;
    height: 40px;
    color: white;
    background-color: lightseagreen;
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200px); /* Ajustez la valeur de défilement selon vos besoins */
    }
}

.scrollAnimation {
    animation: scroll 0.5s ease; /* Durée et type d'animation */
}