.quart-columns {
  --_background: var(--quart-columns--background, var(--background));
  --_color: var(--quart-columns--text-color, var(--text-color));
  --_grid-template-columns: var(--quart-columns--grid-template-columns, repeat(auto-fit, minmax(min(368px, 100%), 1fr)));
  --_hspace: var(--quart-columns--hspace, var(--hspace, 64px));
  --_vspace: var(--quart-columns--vspace, var(--vspace, 64px));
  --_gap: var(--quart-columns--gap, var(--gap, 32px));
  --_bp1: var(--quart-columns--bp1, 768);
  --_bp2: var(--quart-columns--bp2, 1200);
  --_bp3: var(--quart-columns--bp3, 1440);
  --_content-max-width: var(--quart-columns--content-max-width, 1680px);
}

.quart-columns {
  --width-modifier: quart-columns--mobile 0 var(--_bp1), quart-columns--tablet var(--_bp1) var(--_bp2), quart-columns--laptop var(--_bp2) var(--_bp3), quart-columns--desktop var(--_bp3), var(--_custom-width-modifier, width-modifier);
  display: block;
  position: relative;
  color: var(--_color);
  margin-block: var(--_vspace);
}
.quart-columns__background {
  position: absolute;
  inset: 0;
  background: var(--_background);
  pointer-events: none;
}
.quart-columns__background * {
  position: revert;
}
.quart-columns__background img, .quart-columns__background video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;
}
.quart-columns__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-columns__heading {
  margin-block: 0px 48px;
  position: relative;
  text-align: center;
}
.quart-columns__content {
  padding-inline: var(--_hspace);
  max-width: var(--_content-max-width);
  margin-inline: auto;
}
.quart-columns__layout {
  position: relative;
  display: grid;
  gap: var(--_gap);
  grid-template-columns: var(--_grid-template-columns);
}