/* Container for the entire slider */
.horizontal-slider-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Wrapper for the horizontal-slider, necessary for the buttons to work */
.horizontal-slider-wrapper {
    overflow: hidden;
    width: 100%;
}

/* The horizontal-slider with all the images */
.horizontal-slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for both auto-scroll and manual scroll */
}

/* Each horizontal-slide */
.horizontal-slide {
    flex: 0 0 auto;
    width: 400px; /* Default width for each image */
    margin-right: 10px; /* Space between images */
}

.horizontal-slide img {
    width: 100%;
    display: block;
}

/* Container for the buttons positioned below the horizontal-slider */
.horizontal-slider-buttons {
    text-align: center;
    margin-top: 10px; /* Space between horizontal-slider and buttons */
}

.horizontal-slider-button {
    background-color: #d6d6d6;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
}

.horizontal-slider-button:hover {
    background-color: #d90000;
}

/* Position buttons left and right */
.horizontal-slider-button.left {
    margin-right: 10px; /* Space between buttons */
}

.horizontal-slider-button.right {
    margin-left: 10px; /* Space between buttons */
}

/* Responsive Styles */

/* Medium screens: Show 2 images at a time */
@media (max-width: 768px) {
    .horizontal-slide {
        width: calc(50% - 10px); /* Adjust to show 2 images */
    }
}

/* Small screens: Show 1 image at a time */
@media (max-width: 480px) {
    .horizontal-slide {
        width: 100%; /* Full width for one image */
        margin-right: 0; /* No space between images */
    }
}