/* === WRAPPER: left arrow | track | right arrow === */
.wrapper {
  display: flex;              /* puts arrows and track in a row */
  align-items: center;
  gap: 18px;
  width: auto;

  margin: 0 30px;
  position: relative;
}

/* === TRACK: horizontal scroll area === */
.card-container {
  display: flex;
  flex-direction: row;
  gap: 18px;

  overflow-x: auto;           /*  enables horizontal scrolling */
  overflow-y: hidden;
  scroll-behavior: smooth;

  /* optional: nice snap like a carousel */
  scroll-snap-type: x mandatory;

  /* gives breathing room so border doesn't touch edges */
  padding: 14px 6px;

  /* makes drag feel right (if you hook drag events to this element) */
  cursor: grab;

  /* let it take remaining space between arrows */
  flex: 1;
}

/* Hide scrollbar for cleaner look */
.card-container::-webkit-scrollbar {
  display: none;
}
.card-container {
  scrollbar-width: none; /* Firefox */
}

/* === CARD: match the dark bordered boxes === */
.card {
  flex: 0 0 calc(100% / 6);            /* card width (tweak: 280–360) */
  height: 110px;              /* closer to your screenshot than 300px */

  background: transparent;    /* dark background shows through */
  border: 2px solid #ffffff;
  border-radius: 0;           /* square corners like screenshot */

  display: flex;
  flex-direction: column;     /* stack date/time + teams */
  justify-content: center;
  align-items: center;

  text-align: center;
  color: #ffffff;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;

  scroll-snap-align: start;
}

/* Optional: make the first line pop (your JS makes it bold already) */
.card span {
  letter-spacing: 0.5px;
}

/* === NAV BUTTONS: chevrons at sides === */
.nav-btn {
  background: #d4cece;
  color: #000000;

  border: none;
  cursor: pointer;

  font-size: 44px;            /* big chevrons */
  line-height: 1;

  padding: 10px 6px;
  opacity: 0.85;

  width: 50px;
  height: 110px;
}

.nav-btn:hover {
  opacity: 1;
}