:root {
  --tetis-frame-max: 1680px;
  --tetis-frame-gutter: clamp(22px, 5vw, 96px);
}

/* Libera os fundos das seções sem alterar o frame aprovado do Header e Hero. */
.site-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero-main,
.rail-heading,
.rail {
  width: min(var(--tetis-frame-max), 100%);
  margin-inline: auto;
  padding-inline: var(--tetis-frame-gutter);
}

.header {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(
    var(--tetis-frame-gutter),
    calc((100% - var(--tetis-frame-max)) / 2 + var(--tetis-frame-gutter))
  );
  padding-block: 0;
}
.hero-main { padding-block: 60px 30px; }
.rail-heading { padding-block: 23px 15px; }
.rail { padding-block: 0 26px; }

@media (min-width: 1600px) {
  .hero-main { padding-block: 60px 30px; }
}

@media (max-width: 1150px) {
  .hero-main { padding-top: 40px; }
}

@media (max-width: 760px) {
  .header { padding-block: 14px; }
  .hero-main { padding-block: 34px 0; }
  .rail-heading { padding-block: 19px 8px; }
  .rail { padding-block: 0 26px; }
}

@media (max-width: 390px) {
  .site-shell { overflow-x: clip; }
}