.video {
  --padding-vertical: 6rem;
}
.video img {
  max-width: calc(100% + var(--padding-side));
  grid-column: var(--half)/span all;
  grid-row: 1;
}
.video > div {
  grid-column: var(--twelfth)/span calc(var(--sixth) + var(--eighth));
  grid-row: 1;
}
.video__play:not([href]):not(.join-zoom) {
  --sl-input-height-large: 4em;
  grid-column: calc(var(--half) + var(--twelfth))/span 1;
  grid-row: 1;
  transform: translateY(-50%) !important;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}
.video__play:not([href]):not(.join-zoom)::part(label) {
  font-size: 2em;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video__play:not([href]):not(.join-zoom)::part(base) {
  background-color: var(--action-color);
  border-color: var(--action-color);
}
.video__play:not([href]):not(.join-zoom) sl-icon {
  margin-left: 0.06em;
  font-size: 0.9em;
}
.video__dialog::part(header) {
  display: none;
}
.video__dialog::part(panel) {
  height: 90vh;
}
.video__dialog::part(body) {
  padding: 0;
  height: 100%;
  background-color: black;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: stretch;
}
.video__dialog video, .video__dialog iframe {
  width: calc(100% - 6rem);
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.video__dialog .qa-trigger {
  --sl-color-primary-50: var(--primary-color);
  --sl-color-primary-text: white;
  --sl-color-primary-60: var(--primary-color);
  position: absolute;
  bottom: calc(2.5vw + 2em);
  left: calc(5vw + 2em);
}
.video__dialog .qa-trigger:hover {
  --sl-color-primary-text: white;
}
.video__close {
  -webkit-appearance: none;
  width: 6rem;
  background-color: var(--action-color);
  border: none;
  font-size: 3rem;
  color: white;
  padding: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  cursor: pointer;
}
.video.animate-text[data-anim-in].animated > sl-button:not(.ignore-anim):not(.animate-children), .video.animate-text[data-anim-in].animated > *.animate-children > sl-button {
  transform: translateY(-50%);
}
.video--inline {
  padding: 3rem 0;
}
.video--inline img {
  grid-column: 1/span all;
  grid-row: 1;
  max-width: 100%;
}
.video--inline .video__play:not([href]) {
  grid-column: calc(var(--columns) - var(--twelfth))/span 1;
  align-self: flex-end;
  transform: translateY(50%) !important;
}
.video--inline:first-child {
  padding-top: 0;
}
@media screen and (max-width: 1024px) {
  .video img {
    grid-column: calc(var(--half) + 1)/span all;
  }
  .video sl-button {
    grid-column: calc(var(--half) + var(--quarter))/span 1;
  }
  .video--inline img {
    grid-column: 1/span all;
  }
  .video--inline sl-button {
    grid-column: calc(var(--columns) - var(--twelfth))/span 1;
  }
}
@media screen and (max-width: 768px) {
  .video {
    grid-row-gap: 3em;
    --padding-vertical: 2em;
  }
  .video > div {
    grid-column: 1/span var(--columns);
    grid-row: 1;
  }
  .video img {
    grid-row: 2;
    grid-column: 1/span var(--columns);
    margin-left: calc(var(--padding-side) * -1);
    max-width: calc(100% + (2 * var(--padding-side)));
  }
  .video sl-button {
    grid-row: 2;
    grid-column: var(--half)/span 1;
  }
  .video__dialog::part(body) {
    flex-flow: column nowrap;
  }
  .video__dialog video, .video__dialog iframe {
    width: 100%;
    height: calc(100% - 6rem);
  }
  .video__close {
    width: 100%;
    height: 6rem;
  }
  .video--inline img {
    grid-row: 1;
    grid-column: 1/span var(--columns);
  }
  .video--inline .video__play:not([href]) {
    grid-row: 1;
    grid-column: var(--columns)/span 1;
  }
}