.quart-hero {
  --_background: var(--quart-hero--background, var(--background));
  --_bp1: var(--quart-hero--bp1, var(--bp1, 600));
  --_bp2: var(--quart-hero--bp2, var(--bp2, 1240));
  --_bp3: var(--quart-hero--bp3, var(--bp3, 1440));
  --_vspace: var(--quart-hero--vspace, var(--vspace, 96px));
  --_hspace: var(--quart-hero--hspace, var(--hspace, 32px));
  --_content-gap: var(--coro-hero--content-gap, var(--gap, 64px));
  --_main-text-align: center;
  --_heading-color: var(--quart-hero--heading-color, var(--heading-color, inherit));
  --_text-color: var(--quart-hero--text-color, var(--text-color, inherit));
  --_content-max-width: var(--quart-hero--content-max-width, 1680px);
  --_aside-max-width: var(--quart-hero--aside-max-width, 1144px);
  --_main-max-width: var(--quart-hero--main-max-width, 1024px);
  --_min-height: var(--quart-hero--min-height, none);
}

.quart-hero {
  --width-modifier: quart-hero--mobile 0 var(--_bp1), quart-hero--tablet var(--_bp1) var(--_bp2), quart-hero--laptop var(--_bp2) var(--_bp3), quart-hero--desktop var(--_bp3), var(--_custom-width-modifier, width-modifier);
  display: var(--_display, grid);
  color: var(--_text-color);
  position: relative;
  min-height: var(--_min-height);
  padding-inline: var(--_hspace);
}
.quart-hero--without-background-media {
  --_display: block;
  --_content-justify: center;
}
.quart-hero--with-background-media {
  --_content-place-self: center;
}
.quart-hero--justify-center {
  --_content-justify: center;
}
.quart-hero--justify-start {
  --_content-justify: start;
}
.quart-hero--has-hero-aside {
  --_content-justify: center;
  --_main-text-align: center;
  --_content-place-self: center;
}
.quart-hero__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--_background);
  pointer-events: none;
}
.quart-hero__background * {
  position: revert;
}
.quart-hero__background img, .quart-hero__background video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;
}
.quart-hero__background iframe {
  position: absolute;
  max-width: none;
  aspect-ratio: auto;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.quart-hero--with-background-media .quart-hero__background::after {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.quart-hero__content {
  display: grid;
  grid-template-columns: var(--_grid-template-columns, 1fr);
  place-self: var(--_content-place-self, center);
  justify-items: var(--_content-justify, center);
  max-width: var(--_content-max-width);
  margin-inline: auto;
  padding-block: var(--_vspace);
  gap: var(--_content-gap);
  position: relative;
  box-sizing: content-box;
  width: 100%;
}
.quart-hero__main {
  max-width: var(--_main-max-width);
  width: 100%;
  text-align: var(--_main-text-align);
}
.quart-hero__heading {
  color: var(--_heading-color);
}
.quart-hero__aside {
  width: 100%;
  max-width: var(--_aside-max-width);
}
.quart-hero__mc1 {
  margin-block: 500px;
}
.quart-hero__mc2 {
  margin-block: -500px;
}