.rw-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Default values - can be overridden by inline styles */
  --rw-marquee-gap: 20px;
  --rw-marquee-aspect-ratio: 16/9;
  --rw-marquee-border-radius: 12px;
  --rw-marquee-item-width: 25vw;
  --rw-marquee-item-max-width: 420px;
  --rw-marquee-item-width-tablet: 33vw;
  --rw-marquee-item-width-mobile: 50vw;
}

.rw-marquee__track {
  display: flex;
  will-change: transform;
}

.rw-marquee__track > .rw-marquee__row + .rw-marquee__row {
  margin-left: var(--rw-marquee-gap);
}

.rw-marquee__row {
  display: flex;
  gap: var(--rw-marquee-gap);
}

/* Card styling with CSS variables */
.rw-marquee__item {
  flex: 0 0 auto;
  width: var(--rw-marquee-item-width);
  max-width: var(--rw-marquee-item-max-width);
  aspect-ratio: var(--rw-marquee-aspect-ratio);
  overflow: hidden;
  position: relative;
  border-radius: var(--rw-marquee-border-radius);
}

/* Responsive widths - only apply if responsive class is present */
@media (max-width: 782px) {
  .rw-marquee--responsive .rw-marquee__item {
    width: var(--rw-marquee-item-width-tablet);
  }
}

@media (max-width: 600px) {
  .rw-marquee--responsive .rw-marquee__item {
    width: var(--rw-marquee-item-width-mobile);
  }
}

/* Image fills card perfectly */
.rw-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional overlay for titles/captions */
.rw-marquee__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.0)
  );
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.15rem;
}

.rw-marquee__title {
  margin: 0 !important;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

.rw-marquee__author {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.9;
  line-height: 1.2;
}