.container {
  max-width: 100vw;
  padding-top: 6em;
  margin: 0 auto;
}

#noContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em 1em;
  font-size: 2em;
}

#noContent h2 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.6em;
}

#noContent p {
  color: var(--text-secondary);
  margin-bottom: 1em;
}

.list-horizontal-wrapper {
  padding-left: 3.3vw;
}

.list-horizontal {
  display: flex;
  flex-direction: row;
  gap: 1.2em;
}

.list-name {
  font-size: 1.5em;
  margin-bottom: 0.2em;
}

.card {
  width: 72vw;
  flex-shrink: 0;
  flex-grow: 0;
}

.card-link {
  text-decoration: none;
  display: block;
}

.card-img-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.2em;
}
.card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.card-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  width: 100%;
  height: 98%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  transition: var(--transition);
  background-color: var(--hover-overlay);
}

.card:hover .card-overlay {
  opacity: 1;
}

.card-name {
  color: var(--text-secondary);
  text-align: center;
  font-size: 1em;
}

.card-year {
  color: var(--text-muted);
  text-align: center;
  font-size: 0.8em;
}

/* Improved with standard breakpoints */
@media (min-width: 576px) {
  /* ~36em - Mobile landscape */
  .card {
    width: 45.5vw;
  }
}

@media (min-width: 768px) {
  /* ~48em - Tablet */
  .card {
    width: 30vw;
  }
}

@media (min-width: 992px) {
  /* ~62em - Small desktop */
  .card {
    width: 23.1vw;
  }
}

@media (min-width: 1200px) {
  /* ~75em - Desktop */
  .card {
    width: 18.7vw;
  }
}

@media (min-width: 1400px) {
  /* ~87.5em - Large desktop */
  .card {
    width: 17.4vw; /* or keep 18.7vw */
  }
}