/* CMS media binding only. Visual geometry remains owned by Moderna main.css. */
.tpl-full-bootstrapmade-moderna .hero::after {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--background-color), transparent 90%), var(--background-color)),
    var(--hero-background-image, url("assets/img/hero-bg.jpg"));
}

@media (max-width: 575px) {
  .tpl-full-bootstrapmade-moderna .hero .carousel-container {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    padding-inline: 52px;
  }

  .tpl-full-bootstrapmade-moderna .hero h2,
  .tpl-full-bootstrapmade-moderna .hero p {
    width: auto;
    max-width: calc(100vw - 104px);
    line-height: 1.35;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .tpl-full-bootstrapmade-moderna .hero h2 {
    font-size: 26px;
  }
}