.reel-tag {
  left: max(42px, calc((100vw - 1440px) / 2 + 42px));
  border: 0;
  cursor: pointer;
  text-align: left;
}

.project-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.project-trigger:focus-visible {
  outline: 3px solid #f2b946;
  outline-offset: 6px;
}

.project-tv {
  background-image: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25)), url("thumbnails/tv-commercials.jpg");
  background-position: center;
}

.project-virtual {
  background-image: url("thumbnails/virtual-sets.jpg");
  background-position: center;
}

.project-cfa {
  background-image: url("thumbnails/chick-fil-a.jpg");
  background-position: center;
}

.project-software {
  background-image: url("thumbnails/software-promotion.jpg");
  background-position: center;
}

.project-works {
  background-image: url("thumbnails/the-works.jpg");
  background-position: center;
}

.reel-tag:focus-visible,
.reel-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.reel-dialog {
  width: min(92vw, 1100px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.reel-dialog::backdrop {
  background: rgba(2, 3, 5, .88);
  backdrop-filter: blur(8px);
}

.reel-dialog-inner {
  position: relative;
  padding-top: 48px;
}

.reel-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: #0a0b0e;
  color: #fff;
  font: 300 1.8rem/1 sans-serif;
  cursor: pointer;
}

.reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 520px) {
  .reel-dialog { width: 96vw; }
  .reel-dialog-inner { padding-top: 44px; }
}

@media (max-width: 850px) {
  .reel-tag { left: 22px; }
}