*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

.wrapper {
    width: 95%;
    margin: 6px 0 5px 0;
    position: relative;
    height: 39px;
    overflow: hidden;
    mask-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) );
}

.books-container {
    width: 100%;
    overflow: hidden;
}

.books-wrapper {
    display: flex;
    animation: scroll-books 40s linear infinite;
    transition: transform 0.4s ease-out;
}

.book1-custom,
.book2-custom,
.book3-custom,
.book4-custom,
.book5-custom,
.book6-custom {
    position: relative;
    height: 40px;
    border-radius: 10px 0 0 10px;
    background: white;
    margin-right: 20px;
    border: 5px solid transparent;
    flex-shrink: 0;
    transition: transform 0.4s ease-out; 
}

.book1-custom {
    width: 120px;
    border-color: #33cc66;
}

.book2-custom {
    width: 120px;
    border-color: #3952a4;
}

.book3-custom {
    width: 120px;
    border-color: #29a4de;
}

.book4-custom {
    width: 160px;
    border-color: #ed6d35;
}

.book5-custom {
    width: 145px;
    border-color: #03045E;
}

.book6-custom {
    width: 165px;
    border-color: #622d18;
}

@keyframes scroll-books {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.books-container:hover .books-wrapper {
    animation-play-state: paused;
}


.booktitle {
    padding-left: 10px;
    font-weight: bold;
    text-size: 10px;
    color:dimgrey;
    align-items: center;
}


@keyframes slide-left {
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.animation-slide-left {
    animation: slide-left 1s both linear;
}

.hero-content-left {
    transition: transform 3s, opacity 1s;
}

@container (min-width: 0px) {
    .hero-content-left {
        animation-name: slide-left;
        animation-timeline: --section;
        animation-range: exit 0 exit 25%;
    }
}