.rubies-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /*padding-block: 2rem;*/
}

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

.rubies-marquee__track > .rubies-marquee__row + .rubies-marquee__row {
  margin-left: 20px;
}

.rubies-marquee__row {
  display: flex;
  gap: 20px;
}

/* Cards use relative width (desktop) */
.rubies-marquee__item {
  flex: 0 0 auto;
  width: 25vw;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  /*border-radius: 16px;*/
  overflow: hidden;
}

@media (max-width: 960px) {
  .rubies-marquee__item {
    width: 33vw;
  }
}

@media (max-width: 700px) {
  .rubies-marquee__item {
    width: 50vw;
  }
}

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

/* --- Netflix-style overlay --- */
.rubies-marquee__item {
  position: relative; /* allows overlay to sit on top */
  border-radius: 16px; /* if you want rounded cards */
}

/* Overlay container */
.rubies-marquee__overlay {
  position: absolute;
  inset: auto 0 0 0; /* stick to the bottom */
  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;
}

/* Overlay text */
.rubies-marquee__title {
  margin: 0 !important;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

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