.video-collage {
  grid-column: content-start/end;
}
.video-collage .container {
  display: grid;
}
.video-collage .container {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 500px) {
  .video-collage .container {
    padding-left: calc(20px + 20 * (100vw - 500px) / 941);
    padding-right: calc(20px + 20 * (100vw - 500px) / 941);
  }
}
@media screen and (min-width: 1441px) {
  .video-collage .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 64em) {
  .video-collage .container {
    padding-right: 0;
  }
}
.video-collage .video-collage__text {
  --item-col: 1 / span 3;
  --item-row: 4 / span 2;
}
@media (min-width: 48em) {
  .video-collage .video-collage__text {
    --item-col: 1 / span 2;
    --item-row: 1 / span 2;
    align-self: center;
  }
  .video-collage .video-collage__text {
    margin-right: 10px;
  }
}
@media screen and (min-width: 48em) and (min-width: 500px) {
  .video-collage .video-collage__text {
    margin-right: calc(10px + 62 * (100vw - 500px) / 941);
  }
}
@media screen and (min-width: 48em) and (min-width: 1441px) {
  .video-collage .video-collage__text {
    margin-right: 72px;
  }
}
@media (min-width: 64em) {
  .video-collage .video-collage__text {
    --item-col: 1 / span 3;
    --item-row: 1 / span 3;
  }
}
@media (min-width: 64em) {
  .video-collage .video-collage__text .button {
    margin-top: 2rem;
  }
}
.video-collage .video-collage__text p {
  font-size: 1.8rem;
}
.video-collage .video-collage__text h2 {
  font-size: 3.4rem;
  margin-block-end: 2rem;
}
@media (min-width: 80em) {
  .video-collage .video-collage__text h2 {
    font-size: 5rem;
  }
}
.video-collage .grid {
  --grid-temp-col: repeat(3, 1fr);
  grid-template-columns: var(--grid-temp-col);
  display: grid;
  grid-gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
@media (min-width: 48em) {
  .video-collage .grid {
    --grid-temp-col: repeat(4, 1fr);
  }
  .video-collage .grid {
    grid-auto-rows: 180px;
  }
}
@media screen and (min-width: 48em) and (min-width: 500px) {
  .video-collage .grid {
    grid-auto-rows: calc(180px + 20 * (100vw - 500px) / 941);
  }
}
@media screen and (min-width: 48em) and (min-width: 1441px) {
  .video-collage .grid {
    grid-auto-rows: 200px;
  }
}
@media (min-width: 64em) {
  .video-collage .grid {
    --grid-temp-col: repeat(6, 1fr);
  }
}
.video-collage .grid > * {
  grid-column: var(--item-col);
  grid-row: var(--item-row);
}
.video-collage .grid figure,
.video-collage .grid img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.video-collage .grid img {
  -o-object-fit: cover;
     object-fit: cover;
}
.video-collage .grid :nth-child(2) {
  --item-col: 1;
  --item-row: 1;
}
@media (min-width: 48em) {
  .video-collage .grid :nth-child(2) {
    --item-col: 3;
    --item-row: 2;
  }
}
@media (min-width: 64em) {
  .video-collage .grid :nth-child(2) {
    --item-col: 4;
    --item-row: 1;
  }
}
.video-collage [data-element-alignment=vertical] :nth-child(2) {
  --item-col: 2;
  --item-row: 1;
}
@media (min-width: 48em) {
  .video-collage [data-element-alignment=vertical] :nth-child(2) {
    --item-col: 4;
  }
}
@media (min-width: 64em) {
  .video-collage [data-element-alignment=vertical] :nth-child(2) {
    --item-col: 5;
  }
}
.video-collage .grid :nth-child(3) {
  --item-col: 2;
  --item-row: 1;
}
@media (min-width: 48em) {
  .video-collage .grid :nth-child(3) {
    --item-col: 3;
    --item-row: 3;
  }
}
@media (min-width: 64em) {
  .video-collage .grid :nth-child(3) {
    --item-col: 5;
    --item-row: 1;
  }
}
.video-collage [data-element-alignment=vertical] :nth-child(3) {
  --item-col: 3;
  --item-row: 1;
}
@media (min-width: 48em) {
  .video-collage [data-element-alignment=vertical] :nth-child(3) {
    --item-col: 4;
    --item-row: 2;
  }
}
@media (min-width: 64em) {
  .video-collage [data-element-alignment=vertical] :nth-child(3) {
    --item-col: 6;
    --item-row: 1;
  }
}
.video-collage .grid :nth-child(4) {
  --item-col: 3;
  --item-row: 1 / span 2;
}
@media (min-width: 48em) {
  .video-collage .grid :nth-child(4) {
    --item-col: 4;
    --item-row: 2 / span 2;
  }
}
@media (min-width: 64em) {
  .video-collage .grid :nth-child(4) {
    --item-col: 6;
    --item-row: 1 / span 2;
  }
}
.video-collage [data-element-alignment=vertical] :nth-child(4) {
  --item-col: 2 / span 2;
  --item-row: 2;
}
@media (min-width: 48em) {
  .video-collage [data-element-alignment=vertical] :nth-child(4) {
    --item-col: 4;
    --item-row: 3;
  }
}
@media (min-width: 64em) {
  .video-collage [data-element-alignment=vertical] :nth-child(4) {
    --item-col: 5 / span 2;
    --item-row: 2;
  }
}
.video-collage .grid :nth-child(5) {
  --item-col: 1 / span 2;
  --item-row: 2;
}
@media (min-width: 48em) {
  .video-collage .grid :nth-child(5) {
    --item-col: 3 / span 2;
    --item-row: 1;
  }
}
@media (min-width: 64em) {
  .video-collage .grid :nth-child(5) {
    --item-col: 4 / span 2;
    --item-row: 2;
  }
}
.video-collage .grid :nth-child(5) .collage-video {
  filter: brightness(80%);
}
.video-collage .grid :nth-child(5) a {
  height: 100%;
}
.video-collage [data-element-alignment=vertical] :nth-child(5) {
  --item-col: 1;
  --item-row: 1 / span 2;
}
@media (min-width: 48em) {
  .video-collage [data-element-alignment=vertical] :nth-child(5) {
    --item-col: 3;
    --item-row: 1 / span 2;
  }
}
@media (min-width: 64em) {
  .video-collage [data-element-alignment=vertical] :nth-child(5) {
    --item-col: 4;
    --item-row: 1 / span 2;
  }
}
.video-collage [data-element-alignment=vertical] :nth-child(6) {
  --item-col: 1 / span 2;
  --item-row: 3;
}
@media (min-width: 48em) {
  .video-collage [data-element-alignment=vertical] :nth-child(6) {
    --item-col: 2 / span 2;
    --item-row: 3;
  }
}
@media (min-width: 64em) {
  .video-collage [data-element-alignment=vertical] :nth-child(6) {
    --item-col: 4 / span 2;
    --item-row: 3;
  }
}
.video-collage .grid :nth-child(7) {
  --item-col: 2 / span 2;
  --item-row: 3;
}
@media (min-width: 48em) {
  .video-collage .grid :nth-child(7) {
    --item-col: 2;
  }
}
@media (min-width: 64em) {
  .video-collage .grid :nth-child(7) {
    --item-col: 5 / span 2;
  }
}
.video-collage [data-element-alignment=vertical] :nth-child(7) {
  --item-col: 3;
  --item-row: 3;
}
@media (min-width: 48em) {
  .video-collage [data-element-alignment=vertical] :nth-child(7) {
    --item-col: 1;
  }
}
@media (min-width: 64em) {
  .video-collage [data-element-alignment=vertical] :nth-child(7) {
    --item-col: 6;
  }
}

/*# sourceMappingURL=video-collage.css.map*/