/* =============== HERO SECTION =============== */

#hero-section {
  background-image: url("../images/ink-hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: var(--padding-sm);
  width: 100%;
  height: 100vh;
  padding-top: var(--nav-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
}

@media (min-width: 992px) {
  #hero-section {
    padding: var(--padding-md);
  }
}

@media (min-width: 1440px) {
  #hero-section {
    padding: var(--padding-lg);
  }
}

#hero-section .logo {
  width: 760px;
  height: auto;
  animation-delay: 250ms;
}

#hero-section .btn {
  margin-left: var(--padding-sm);
  animation-delay: 600ms;
}

@media (min-width: 992px) {
  #hero-section .btn {
    margin-left: var(--padding-md);
  }
}

@media (min-width: 1440px) {
  #hero-section .btn {
    margin-left: var(--padding-lg);
  }
}

/* =============== SHOW INFO SECTION =============== */

#show-info-section {
  padding: var(--padding-sm);
  box-shadow: inset 0px 35px 13px -25px rgba(0, 0, 0, 0.35);
}

@media (min-width: 992px) {
  #show-info-section {
    padding: var(--padding-md);
  }
}

@media (min-width: 1440px) {
  #show-info-section {
    padding: var(--padding-lg);
  }
}

#show-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: var(--padding-sm);
  border: 1px solid var(--border-secondary);
  border-radius: 12px;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  background-color: var(--background-primary);
}

#show-details-wrapper {
  display: flex;
  gap: 80px;
}

#play-by-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#play-by-wrapper p {
  font-size: var(--text-small);
}

#play-dates-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#play-dates-wrapper p {
  font-size: var(--text-small);
}

#about-the-show-wrapper {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.about-the-show-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-the-show-section p {
  font-size: var(--text-small);
}

/* =============== PHOTO STRIPS SECTION =============== */

#photo-strips-section {
  width: 100%;
  display: flex;
  align-items: center;
}

#photo-strip-1 {
  width: 17%;
  flex-grow: 1;
  height: auto;
}

#photo-strip-2 {
  width: 13%;
  flex-grow: 1;
  height: auto;
}

#photo-strip-3 {
  width: 16%;
  flex-grow: 1;
  height: auto;
}

#photo-strip-4 {
  width: 14%;
  flex-grow: 1;
  height: auto;
  display: none;
}

#photo-strip-5 {
  width: 11%;
  flex-grow: 1;
  height: auto;
  display: none;
}

#photo-strip-6 {
  width: 13%;
  flex-grow: 1;
  height: auto;
  display: none;
}

#photo-strip-7 {
  width: 16%;
  flex-grow: 1;
  height: auto;
  display: none;
}

@media (min-width: 768px) {
  #photo-strip-4 {
    display: block;
  }

  #photo-strip-5 {
    display: block;
  }
}

@media (min-width: 1024px) {
  #photo-strip-6 {
    display: block;
  }

  #photo-strip-7 {
    display: block;
  }
}