/* Vallelata: proportions from the supplied 1908px editorial layout.
   Media follow the page grid, independent of the viewport's height. */
.case-study-vallelata .vallelata-article {
  --vallelata-inset: calc(100% * 1493 / 1820);
  --vallelata-inset-start: calc(100% * 155 / 1820);
  background: #fff;
  color: var(--red);
}
.vallelata-article *, .vallelata-article *::before, .vallelata-article *::after { box-sizing: border-box; }
.vallelata-article :is(h1,h2,p,figure) { margin: 0; }
.vallelata-article :is(img,video) { display: block; width: 100%; height: auto; }
.case-study-vallelata .blog-article-main .vallelata-copy p { max-width: none; }
.vallelata-copy p + p { margin-top: 1em; }
.case-study-vallelata .blog-article-main .vallelata-split__copy h2 {
  font-size: var(--editorial-small); font-weight: 700; line-height: 1.25;
}
.case-study-vallelata .vallelata-hero,
.case-study-vallelata .vallelata-split {
  display: grid;
  grid-template-columns: minmax(0,828fr) minmax(0,972fr);
  column-gap: max(16px, calc((100vw - var(--grid-left) - var(--grid-right)) * 20 / 1820));
  padding-inline: var(--grid-left) var(--grid-right);
}
.case-study-vallelata .vallelata-hero {
  align-items: start;
  padding-top: 32px;
  padding-bottom: var(--detail-section-space);
}
.vallelata-hero__copy { min-width: 0; }
.vallelata-hero__intro { margin-top: clamp(32px,3.5vw,67px); }
.vallelata-hero__media { width: 100%; }
.vallelata-hero__media img { aspect-ratio: 1000 / 1188; object-fit: contain; }
.case-study-vallelata .blog-article-main .vallelata-split { align-items: center; }
.vallelata-split__media { width: calc(100% * 616 / 828); justify-self: center; min-width: 0; }
.vallelata-split__video { aspect-ratio: 1074 / 1920; object-fit: contain; background: #fff; }
.vallelata-split__copy { min-width: 0; }
.vallelata-split__copy .vallelata-copy { margin-top: clamp(24px,2vw,38px); }
.case-study-vallelata .vallelata-gallery {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
}
.case-study-vallelata .vallelata-gallery--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.vallelata-gallery img { aspect-ratio: 768 / 1376; object-fit: cover; }
.vallelata-product-clips__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  width: var(--vallelata-inset);
  margin-inline: var(--vallelata-inset-start) 0;
}
.vallelata-product-clips video { aspect-ratio: 9 / 16; object-fit: contain; background: #fff; }
.vallelata-article .vallelata-film__media { width: var(--vallelata-inset); margin-inline: var(--vallelata-inset-start) 0; }
.vallelata-film video { aspect-ratio: 1920 / 1072; object-fit: contain; background: #fff; }
.case-study-vallelata .blog-article-main .vallelata-film__copy {
  width: var(--vallelata-inset); margin: clamp(32px,3vw,56px) 0 0 var(--vallelata-inset-start);
}
.vallelata-final__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  width: var(--vallelata-inset);
  margin-inline: var(--vallelata-inset-start) 0;
}
.vallelata-final img { aspect-ratio: 2752 / 1536; object-fit: contain; }
.case-study-vallelata .article-mobile-video-host { position: relative; }
@media (min-width: 901px) {
  .case-study-vallelata .article-mobile-play {
    position: absolute; z-index: 3; display: grid; place-items: center;
    width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%;
    transform: translate(-50%,-50%); background: var(--red); color: #fff; cursor: pointer;
  }
  .case-study-vallelata .article-mobile-play[hidden] { display: none; }
  .case-study-vallelata .article-mobile-play svg { width: 30px; height: 30px; fill: currentColor; }
  .case-study-vallelata .article-mobile-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
}
@media (max-width: 900px) {
  .case-study-vallelata .blog-article-main .vallelata-hero,
  .case-study-vallelata .blog-article-main .vallelata-split {
    grid-template-columns: minmax(0,1fr); row-gap: 40px;
  }
  .case-study-vallelata .blog-article-main .article-mobile-preview {
    display: block; width: min(100%,600px); margin: 24px auto 0;
  }
  .case-study-vallelata .blog-article-main .article-mobile-preview img { aspect-ratio: 1000 / 1188; }
  .case-study-vallelata .vallelata-hero__media { display: none; }
  .case-study-vallelata .vallelata-hero__intro { margin-top: 24px; }
  .vallelata-split__media { width: min(100%,520px); }
  .vallelata-split__copy { width: min(100%,42rem); justify-self: center; }
  .case-study-vallelata .vallelata-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-study-vallelata .vallelata-gallery--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .case-study-vallelata .vallelata-article { --vallelata-inset: 100%; --vallelata-inset-start: 0px; }
}
@media (max-width: 600px) {
  .case-study-vallelata .blog-article-main .vallelata-hero h1 br { display: inline; }
  .case-study-vallelata .vallelata-final__grid { grid-template-columns: minmax(0,1fr); }
}