.ods-page {
  --ods-g: 20px;
  --ods-gap: 108px;
  --ods-media-gap: 4px;
}

.ods-page .case > * + * {
  margin-top: var(--ods-gap);
}

.ods-page .case > *:first-child {
  margin-top: 0;
}

.ods-page .case-title + .case-hero {
  margin-top: 24px;
}

.ods-page .case-title {
  padding: 80px var(--ods-g) 0;
}

.ods-page .case-title h1 {
  font-family: 'Pepi Regular';
  font-size: clamp(36px, 5.5vw, 72px);
  color: var(--preto, #191A1C);
  line-height: 1;
  margin: 0;
}

.ods-page .case-title .sub {
  font-family: 'Pepi Regular';
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--preto, #191A1C);
  opacity: 0.35;
  margin-top: 12px;
}

.ods-page .case-hero,
.ods-page .v-full {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ods-page .case-hero iframe,
.ods-page .case-hero video,
.ods-page .case-hero img,
.ods-page .v-full iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ods-page .case-body {
  padding: 0 var(--ods-g);
}

.ods-page .case-body p {
  font-family: 'Pepi Regular';
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.4;
  color: var(--preto, #191A1C);
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
}

.ods-page .ods-centered-image {
  padding: 0 var(--ods-g);
  display: flex;
  justify-content: center;
}

.ods-page .ods-centered-image img {
  width: min(60%, 920px);
  height: auto;
  display: block;
}

.ods-page .ods-centered-horizontal-video {
  padding: 0 var(--ods-g);
  display: flex;
  justify-content: center;
}

.ods-page .ods-centered-horizontal-video .ods-horizontal-video-frame {
  position: relative;
  width: min(60%, 920px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ods-page .ods-centered-horizontal-video .ods-horizontal-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ods-page .ods-media-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--ods-media-gap);
  padding: 0 var(--ods-g);
  width: 100%;
}

.ods-page .ods-media-row--offset {
  padding-left: max(20vw, 220px);
}

.ods-page .ods-media-card {
  position: relative;
  flex: 0 0 auto;
  height: var(--ods-media-height, clamp(260px, 30vw, 460px));
  width: var(--ods-media-width);
  overflow: hidden;
}

.ods-page .ods-media-card iframe,
.ods-page .ods-media-card video,
.ods-page .ods-media-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  display: block;
}

.ods-page .ods-media-card--landscape {
  --ods-media-width: calc(var(--ods-media-height, clamp(220px, 28vw, 440px)) * 16 / 9);
}

.ods-page .ods-media-card--portrait {
  --ods-media-width: calc(var(--ods-media-height, clamp(220px, 28vw, 440px)) * 9 / 16);
}

.ods-page .ods-media-card--square {
  --ods-media-width: var(--ods-media-height, clamp(220px, 28vw, 440px));
}

.ods-page .v-full .v-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.ods-page .v-full .v-inner iframe {
  position: absolute;
  inset: 0;
}

.ods-page .ods-last-row {
  padding: 0 var(--ods-g);
  display: flex;
  justify-content: center;
}

.ods-page .ods-last-row-inner {
  --ods-last-row-height: clamp(280px, 31vw, 500px);
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.ods-page .ods-last-row-video,
.ods-page .ods-last-row-photo {
  position: relative;
  height: var(--ods-last-row-height);
  overflow: hidden;
  flex: 0 0 auto;
}

.ods-page .ods-last-row-video {
  aspect-ratio: 9 / 16;
}

.ods-page .ods-last-row-photo {
  aspect-ratio: 4 / 3;
}

.ods-page .ods-last-row-video iframe,
.ods-page .ods-last-row-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ods-page .ods-last-row-video iframe {
  object-fit: cover;
}

.ods-page .ods-last-row-photo img {
  object-fit: cover;
}

.ods-page .case-credits {
  padding: 0 var(--ods-g);
  margin-bottom: var(--ods-gap);
}

.ods-page .cr {
  display: flex;
  padding: 6px 0;
  font-family: 'Pepi Regular';
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
}

.ods-page .cr-label {
  width: 100px;
  flex-shrink: 0;
  opacity: 0.35;
}

.ods-page .cr-value {
  color: var(--preto, #191A1C);
}

@media (max-width: 760px) {
  .ods-page {
    --ods-g: 16px;
    --ods-gap: 36px;
    --ods-media-gap: 16px;
  }

  .ods-page .case-title {
    padding: 56px var(--ods-g) 0;
  }

  .ods-page .case-title h1 {
    font-size: clamp(28px, 8vw, 44px);
  }

  .ods-page .case-body p {
    font-size: clamp(16px, 4.5vw, 22px);
    max-width: 100%;
  }

  .ods-page .ods-centered-image img {
    width: 100%;
  }

  .ods-page .ods-centered-horizontal-video .ods-horizontal-video-frame {
    width: 100%;
  }

  .ods-page .ods-media-row,
  .ods-page .ods-media-row--offset {
    padding-left: var(--ods-g);
    padding-right: var(--ods-g);
  }

  .ods-page .ods-media-row {
    flex-direction: column;
  }

  .ods-page .ods-media-card,
  .ods-page .ods-media-card--landscape,
  .ods-page .ods-media-card--portrait,
  .ods-page .ods-media-card--square {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .ods-page .ods-media-card--landscape {
    aspect-ratio: 16 / 9;
  }

  .ods-page .ods-media-card--portrait {
    aspect-ratio: 9 / 16;
  }

  .ods-page .ods-media-card--square {
    aspect-ratio: 1 / 1;
  }

  .ods-page .ods-last-row-inner {
    flex-direction: column;
    width: 100%;
  }

  .ods-page .ods-last-row-video,
  .ods-page .ods-last-row-photo {
    width: 100%;
    height: auto;
  }

  .ods-page .ods-last-row-video {
    aspect-ratio: 9 / 16;
  }

  .ods-page .ods-last-row-photo {
    aspect-ratio: 4 / 3;
  }

  .ods-page .cr {
    flex-direction: column;
    gap: 2px;
  }

  .ods-page .cr-label {
    width: auto;
  }
}