/* FINAL HOME MEDIA LAYOUT
   Goal:
   - video slightly left
   - fairs slightly right
   - fair images larger
*/

body .video-section {
  width: 100% !important;
  padding: 18px 0 22px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0.20)) !important;
  overflow: hidden !important;
}

body .video-and-fair {
  width: min(100% - 70px, 1380px) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: minmax(0, 940px) 390px !important;
  gap: 38px !important;

  align-items: center !important;
  justify-content: center !important;
}

/* Shift video a bit left */
body .home-video-panel {
  width: 940px !important;
  max-width: 100% !important;
  justify-self: end !important;
  margin-left: -42px !important;
}

/* Keep video stable */
body .home-video-panel .video-frame {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
}

body .home-video-panel .video-intro {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Shift fairs right and enlarge */
body .fair-slideshow {
  width: 390px !important;
  max-width: 390px !important;
  justify-self: start !important;
  margin-left: 34px !important;
}

body .fair-header {
  width: 390px !important;
  font-size: 20px !important;
  padding: 9px 0 !important;
  background: rgba(0,0,0,0.62) !important;
  color: #fff !important;
  text-align: center !important;
  font-weight: 800 !important;
}

body .fair-frame {
  width: 390px !important;
  min-height: 0 !important;
  background: #111 !important;
  overflow: hidden !important;
}

body .fair-frame img,
body .fair-frame .fair-slide {
  width: 390px !important;
  max-width: 390px !important;
  height: auto !important;
  display: none !important;
}

body .fair-frame img.active,
body .fair-frame .fair-slide.active {
  display: block !important;
}

/* Fair arrows move with the bigger fair image */
body .fair-arrow {
  top: 54% !important;
  font-size: 34px !important;
  padding: 6px 13px !important;
  background: rgba(0,0,0,0.45) !important;
  color: #fff !important;
  border: 0 !important;
}

body .fair-arrow.left {
  left: 6px !important;
}

body .fair-arrow.right {
  right: 6px !important;
}

/* If only one side exists */
body .media-only-video {
  display: flex !important;
  justify-content: center !important;
}

body .media-only-video .home-video-panel {
  width: min(940px, 94vw) !important;
  margin-left: 0 !important;
}

body .media-only-fair {
  display: flex !important;
  justify-content: center !important;
}

body .media-only-fair .fair-slideshow {
  width: min(390px, 94vw) !important;
  max-width: min(390px, 94vw) !important;
  margin-left: 0 !important;
}

/* Laptop */
@media (max-width: 1280px) {
  body .video-and-fair {
    width: min(100% - 50px, 1180px) !important;
    grid-template-columns: minmax(0, 820px) 350px !important;
    gap: 30px !important;
  }

  body .home-video-panel {
    width: 820px !important;
    margin-left: -28px !important;
  }

  body .fair-slideshow,
  body .fair-header,
  body .fair-frame,
  body .fair-frame img,
  body .fair-frame .fair-slide {
    width: 350px !important;
    max-width: 350px !important;
  }

  body .fair-slideshow {
    margin-left: 24px !important;
  }
}

/* Mobile */
@media (max-width: 980px) {
  body .video-and-fair {
    width: min(100% - 28px, 900px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body .home-video-panel {
    width: 100% !important;
    margin-left: 0 !important;
    justify-self: center !important;
  }

  body .fair-slideshow {
    width: min(390px, 94vw) !important;
    max-width: min(390px, 94vw) !important;
    margin-left: 0 !important;
    justify-self: center !important;
  }

  body .fair-header,
  body .fair-frame,
  body .fair-frame img,
  body .fair-frame .fair-slide {
    width: min(390px, 94vw) !important;
    max-width: min(390px, 94vw) !important;
  }
}