@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

body {
  font-family: 'JetBrains Mono', monospace;
  background-color: black;
  margin: 0;
}

.slider {
  padding-left: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.slider .wrapper {
  display: flex;

  --gap: 1vmin;
  --tot-s: 1; /* defaults */
  --vis-s: min(6, var(--tot-s)); /* defaults */
  --curr-s: 1; /* defaults */
  --slide-w: calc(
    min(
      320px,
      (100% - var(--gap) * (var(--vis-s) - 1)) /
        (var(--vis-s) + min(var(--tot-s) - var(--vis-s), 0.5))
    )
  );
  max-width: calc(
    var(--tot-s) * var(--slide-w) + (var(--vis-s) - 1) * var(--gap)
  );
  gap: var(--gap);
  overflow: visible;
  transition-duration: 0.7s;
  transition-property: transform;
  transform: translateX(
    calc(
      -1 * (var(--slide-w) + var(--gap)) * max(0, min(var(--tot-s) - var(--vis-s) -
              0.5, var(--curr-s) - 1.25 - (var(--vis-s) - 1) / 2))
    )
  );
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transform: scale(0.9);
  transition-property: transform;
  transition-duration: 0.5s;
}

.card img {
  border-radius: 20px;
  width: var(--slide-w);
  height: 380px;
  /* height: auto; */
  width: 280px;
}

.card time {
  font-size: 1.4em;
  padding: 10px;
  /* width: 100px; */
  color: white;
}

.card p {
  font-size: 0.75em;
  /* width: 100px; */
  color: white;
}

.slider:not(:has(.card:focus)) .card:first-child,
.slider .card:focus {
  transform: scale(1);
}

/* Number of visible slides on smaller screens */
@media (max-width: 1810px) {
  .slider .wrapper {
    --vis-s: min(5, var(--tot-s));
  }
}

@media (max-width: 1530px) {
  .slider .wrapper {
    --vis-s: min(4, var(--tot-s));
  }
}

@media (max-width: 1250px) {
  .slider .wrapper {
    --vis-s: min(3, var(--tot-s));
  }
}

@media (max-width: 970px) {
  .slider .wrapper {
    --vis-s: min(2, var(--tot-s));
  }
}

@media (max-width: 750px) {
  .slider {
    padding-left: calc(50vw - 140px);
  }

  .slider .wrapper {
    --vis-s: 1;
    transform: translateX(
      calc(-1 * (280px + var(--gap)) * (var(--curr-s) - 1))
    );
  }
}