/* ===== 1. Marquee container ===== */
.blogslider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
}

    .blogslider::before,
    .blogslider::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
    }

    .blogslider::before {
        left: 0;
        background: linear-gradient(to right, #fff, transparent);
    }

    .blogslider::after {
        right: 0;
        background: linear-gradient(to left, #fff, transparent);
    }

.blogslider__viewport {
    overflow: hidden;
    width: 100%;
}

.blogslider__track {
    display: flex;
    width: max-content;
    animation: blogslider-scroll 40s linear infinite;
}

.blogslider:hover .blogslider__track {
    animation-play-state: paused;
}

.blogslider__group {
    display: flex;
    flex-shrink: 0;
    gap: 24px;
    padding-right: 24px;
}

@keyframes blogslider-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ===== 2. Override Bootstrap row/col so cards go horizontal ===== */
.blogslider__group .row {
    display: flex;
    flex-wrap: nowrap; /* stop bootstrap from wrapping to new lines */
    margin: 0;
}

.blogslider__group .col-xl-6,
.blogslider__group .col-lg-6,
.blogslider__group .col-md-6 {
    width: 320px; /* fixed width instead of % based grid column */
    max-width: 320px;
    flex: 0 0 auto; /* don't grow/shrink */
    padding: 0;
}