.css-banner-container { 
    position: relative; 
    width: 100%; 
    border-radius: 8px; 
    overflow: hidden; 
}

.css-banner-slide { 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    width: 100%; 
    min-height: 220px; /* стандарт для ПК */
    transition: opacity .4s ease; 
    padding: 16px 20px; 
    display: flex; 
    align-items: flex-start; /* текст по верхнему краю */
    gap: 16px; 
}

/* На мобилках делаем выше */
@media (max-width: 768px) {
    .css-banner-slide {
        min-height: 280px; 
    }
}

.css-banner-slide.active { 
    opacity: 1; 
    visibility: visible; 
    position: relative; 
}

.css-text-content { 
    flex: 1; 
    min-width: 240px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* прижимаем содержимое к левому краю */
    justify-content: flex-start; /* текст тянется к верху */
}

.css-subtitle { 
    font-weight: 600; 
    font-size: 12px; 
    margin: 0 0 4px 0; 
}

.css-learn-btn { 
    margin-top: 12px; 
    background: white; 
    border: none; 
    border-radius: 6px; 
    padding: 6px 12px; 
    font-size: 12px; 
    cursor: pointer; 
    display: inline-block; 
    text-decoration: none; 
    width: auto;           /* не растягивается */
    max-width: max-content; /* ширина по содержимому */
}

/* картинка строго 150x150 */
.css-image-container { 
    width: 155px; 
    height: 155px; 
    border-radius: 8px; 
    overflow: hidden; 
    flex-shrink: 0; 
    background: none; 
    display: flex;
    align-items: flex-start; /* верх картинки совпадает с верхом текста */
}

.css-image-container img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    display: block; 
}

.css-banner-controls { 
    position: absolute; 
    bottom: 12px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.css-pause-btn { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
}

.css-pause-btn svg { 
    width: 14px; 
    height: 14px; 
}

.css-progress-bars { 
    display: flex; 
    gap: 6px; 
}

.css-progress-bar { 
    width: 30px; 
    height: 4px; 
    background: rgb(76 76 76 / 30%); 
    border-radius: 3px; 
    cursor: pointer; 
    overflow: hidden; 
}

.css-progress-fill { 
    height: 100%; 
    width: 0%; 
    background: white; 
    border-radius: 3px; 
    transition: width linear; 
}

.css-progress-bar.active .css-progress-fill { 
    width: 100%; 
    transition: none; 
}

.css-progress-text { 
    color: white; 
    font-size: 12px; 
    font-weight: 600; 
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 600px) {
    .css-banner-slide { 
        padding: 12px 16px; 
    }
    .css-text-content { 
        min-width: 100%; 
    }
}