.grid-banner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  block-size: 100%;
  container-type: inline-size;
  container-name: grid-banner;
}

.grid-banner-media {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: relative;

  @media (min-width: 1200px) {
    block-size: calc(100% - calc(var(--space-80) + var(--space-32) + var(--space-2)));
  }

  > * {
    block-size: 100%;
    object-fit: cover;
  }

  &:has(.grid-banner-content-hover-container) {
    min-block-size: calc(100cqi * 5 / 4);

    > * {
      position: absolute;
    }
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: calc(var(--backdrop-opacity) / 100);
    z-index: 1;
  }
}

.grid-banner-content {
  display: grid;
  place-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  padding: var(--space-24) var(--space-24) var(--space-40) var(--space-24);
  text-align: center;
  z-index: 2;
  gap: var(--space-16);
  background-color: transparent;
}

@container grid-banner (min-width: 500px) {
  .grid-banner-content {
    padding-inline: var(--space-56);
  }
}

@container grid-banner (min-width: 700px) {
  .grid-banner-content {
    padding-inline: var(--space-128);
  }
}

.grid-banner-container .rich-text > * + * {
  margin-block-start: var(--space-12);
}

.grid-banner-content-icon {
  justify-self: center;
  block-size: var(--space-80);
  inline-size: var(--space-80);
  position: relative;
  transition:
    block-size var(--transition-discrete),
    opacity var(--transition-discrete);

  img {
    position: absolute;
    inset: 0;
    inline-size: var(--space-80);
    block-size: var(--space-80);
    object-fit: contain;
  }
}

.grid-banner-content-hover-container {
  max-block-size: 100%;
  block-size: 0;
  opacity: 0;
  overflow: auto;
  transition:
    block-size var(--transition-discrete),
    opacity var(--transition-discrete);

  &::-webkit-scrollbar {
    display: none;
  }
}

.grid-banner-content-hover-label {
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  cursor: pointer;

  &:has(.grid-banner-content-hover-input:focus-visible) {
    outline: 1px dashed var(--scheme-text);
    outline-offset: var(--space-2);
  }

  span[data-read-more='active'] {
    display: none;
  }

  &:has(.grid-banner-content-hover-input:checked) {
    span[data-read-more='inactive'] {
      display: none;
    }

    span[data-read-more='active'] {
      display: block;
    }
  }
}

.grid-banner-media-hover-image {
  opacity: 0;
  transition: opacity var(--transition-discrete);
}

.grid-banner:has(.grid-banner-content-hover-input:checked) {
  .grid-banner-media-hover-image {
    opacity: 1;
  }

  .grid-banner-content-icon {
    block-size: 0;
    opacity: 0;
  }

  .grid-banner-content-hover-container {
    block-size: auto;
    opacity: 1;
  }
}