.s-hero-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  width: min(var(--hero-cover-width, 100vw), 100%);
  min-height: 100svh;
  min-height: var(--hero-cover-height, 100svh);
  margin-inline: auto;
  overflow: hidden;
}

.s-hero-cover__background {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.s-hero-cover__background > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-hero-cover__content {
  position: relative;
  z-index: 1;
  display: grid;
  box-sizing: border-box;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: inherit;
}

.s-hero-cover[data-horizontal-alignment="start"] .s-hero-cover__content {
  justify-items: start;
}

.s-hero-cover[data-horizontal-alignment="end"] .s-hero-cover__content {
  justify-items: end;
}

.s-hero-cover[data-vertical-alignment="start"] .s-hero-cover__content {
  align-items: start;
}

.s-hero-cover[data-vertical-alignment="end"] .s-hero-cover__content {
  align-items: end;
}

.s-hero-cover__content > .s-layout-group {
  width: fit-content;
  max-width: 100%;
}