.mttb-banner{position:relative;padding:0;background:transparent}

/* Carousel container */
.mttb-carousel{overflow:hidden;width:100%;position:relative;height:300px}
.mttb-track{display:flex;align-items:center;white-space:nowrap;height:100%}
.mttb-item{flex-shrink:0;height:100%;display:flex;align-items:center;aspect-ratio:1}
.mttb-item img{height:100%;width:auto;object-fit:cover;}

/* Title overlay */
.mttb-overlay{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:20}
.mttb-overlay .mttb-link{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;color:#ffffff;background:rgba(0,0,0,0.4);border-radius:0;font-size:60px;text-shadow:0 0 5px #000;}

/* When there's a single item we'll stop animating */
.mttb-track.single-item{animation: none}

/* Use a CSS animation only as a fallback; JS will set inline transform for smooth continuous scroll */
@keyframes mttb-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@media (max-width:600px){
	.mttb-carousel{height:200px}
	.mttb-overlay .mttb-link{font-size:40px;padding:10px 14px}
}