:root {
  --event-hero-background-element: url("../../images/branding-element-01.webp");
}

.spr-event-hero {
  position: relative;
  margin-block-start: calc(var(--hero-margin, 5.25rem) * -1);
  padding-block-start: var(--padding-vertical-small);
  color: var(--color-white);
  background-image: var(--gradient-0);
  background-position: var(--gradient-0-position);
  background-size: var(--gradient-0-size);

  body.toolbar-horizontal & {
    margin-block-start: calc((var(--hero-margin, 5.25rem) * -1) - var(--drupal-displace-offset-top));
  }
}

.spr-event-hero__container {
  background-image: var(--event-hero-background-element);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 25%;
  padding-block: var(--padding-vertical-main);

  &.grid {
    row-gap: var(--padding-vertical-main);
  }
}

.spr-event-hero__header {
  grid-column: 1 / span 4;

  @media (min-width: 992px) {
    grid-column: 1 / span 12;
  }
}

.spr-event-hero__text {
  grid-column: 1 / span 4;
  font-size: var(--font-size-s);
  line-height: 2.5rem;

  @media (min-width: 992px) {
    grid-column: 1 / span 5;
  }
}
.spr-event-hero__image {
  grid-column: 1 / span 4;

  img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius);
    aspect-ratio: 551 / 310;
  }

  @media (min-width: 992px) {
    grid-column: 8 / span 5;
  }
}