.seats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 290px);
}

.seats-container .seats-parent {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap; /* Important: allows items to wrap to next line */
  align-items: flex-end;
  justify-content: space-around;
  gap: 150px 20px;
}

/* Each seat div - default (mobile) */
.seats-container .seats-parent > .seats-card {
  flex: 0 0 calc(100% - 20px); /* 1 per line on mobile */
  max-width: calc(100% - 20px);
  margin-bottom: 20px;
  margin-top: 20px;
}

/* Medium screens (tablet) - 2 per line */
@media (min-width: 768px) {
  .seats-container .seats-parent > .seats-card {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* Large screens (desktop) - 4 per line */
@media (min-width: 1024px) {
  .seats-container .seats-parent > .seats-card {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
  }
}

@media (min-width: 3840px) {
  .seats-container {
    min-height: calc(60vh - 60px);
  }

  .seats-container .seats-parent > .seats-card {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
  }

  .seats-card .seat-title {
    /* text-align: start; */
    text-transform: uppercase;
    font-weight: normal;
    font-size: 3rem;
  }

  .seats-card .seat-number {
    font-size: 12rem !important;
    margin: 0;
  }

  .seats-card .seat-description {
    text-transform: uppercase;
    font-size: 2rem;
  }

  nav img {
    height: 20vh;
  }

  footer {
    min-height: 20vh !important;
  }
}

.seats-card {
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s;
}

.seats-card .seat-title {
  /* text-align: start; */
  text-transform: uppercase;
  font-weight: normal;
}

.seats-card .seat-number {
  font-size: 8rem;
  margin: 0;
  transition: color 0.3s;
}

.seats-card .seat-number.hidden {
  color: transparent;
}

.seats-card .seat-description {
  text-transform: uppercase;
  margin-top: 2rem;
}

.seat-number.updated {
  animation: flash 1s;
}

@keyframes flash {
  0%,
  100% {
    color: #00bbd9;
  }
  50% {
    color: #00bcd969;
  }
}