.#{project('stage')} {
  --spacing: 50px;

  position: relative;
  @include grid;
  color: color('white');
  grid-column: 1 / -1;
  padding: var(--spacing) 0;

  @include respond-to('small') {
    --spacing: 100px;
  }

  &:before {
    content: '';
    @include fill;
    @include ci-websites;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3em), 0 100%, 0 100%);

    @include respond-to('small') {
      height: calc(100% - var(--spacing));
    }
  }

  &-text,
  &-media,
  &-backdrop {
    position: relative;
    z-index: 1;
  }

  &-text {
    grid-column: 2 / 24;
    margin-bottom: var(--spacing);

    @include respond-to('small') {
      grid-row: 1;
      grid-column: 2 / span 11;
    }

    p {
      color: inherit;
    }
  }

  &-media {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: flex-end;
    margin-bottom: var(--spacing);
    overflow: hidden;
    padding-bottom: 105%;
    z-index: 0;

    amp-img img {
      object-fit: cover;
    }

    @include respond-to('small') {
      top: 20%;
      padding-top: var(--spacing);
      padding-bottom: unset;
      margin-bottom: calc(-1 * var(--spacing));
      width: 1100px;
      height: 669px;
    }

    @include respond-to('medium') {
      top: 0;
      grid-column: 6 / -1;
    }

    @include respond-to('large') {
      grid-column: 9 / -1;
    }

    @include respond-to('max') {
      grid-column: 11 / -1;
    }
  }

  &-backdrop {
    display: none;

    @include respond-to('medium') {
      display: block;
      grid-row: 1;
      grid-column: 14 / -1;
      align-self: center;
    }

    svg,
    amp-img {
      width: 100%;
    }

    svg {
      height: 100%;
    }

    @include respond-to('medium') {
      margin-top: -25%;

      svg {
        width: auto;
        height: auto;
      }
    }

    @include respond-to('large') {
      grid-column: 14 / span 8;
    }
  }

  .#{project('button')} {
    margin-top: 50px;
  }
}
