.spr-article-detail {
  padding-block: var(--padding-vertical-main);

  &.grid {
    row-gap: 0;

    @media (min-width: 768px) {
      grid-template-columns: repeat(12, 1fr);
    }
  }
}

.spr-article-detail.spr-article-detail--video,
.spr-article-detail.spr-article-detail--photo {
  row-gap: 0;
}

.spr-article-detail__date {
  margin-block-end: var(--space-small);
}

.spr-article-detail__header {
  grid-column: 1 / span 4;

  &.spr-rich-text {
    margin-block-end: var(--space-large);
  }

  @media (min-width: 768px) {
    grid-column: 2 / span 10;
  }

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

  @media (min-width: 1280px) {
    grid-column: 4 / span 6;
  }
}

.spr-article-detail--video .spr-article-detail__header,
.spr-article-detail--photo .spr-article-detail__header {
  &.spr-rich-text {
    margin-block-end: var(--space-small);
  }
  @media (min-width: 768px) {
    grid-column: 2 / span 10;
  }
}

.spr-article-detail--video .spr-article-detail__header h1,
.spr-article-detail--photo .spr-article-detail__header h1 {
  letter-spacing: -0.0625rem;
  font-size: var(--font-size-m);
  line-height: var(--font-size-m);
}

.spr-article-detail__media {
  grid-column: 1 / span 4;
  margin-block-end: var(--space-large);

  img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    aspect-ratio: 1344 / 625;
  }

  &:empty {
    display: none;
  }

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

.spr-article-detail--photo .spr-article-detail__media img {
  aspect-ratio: unset;
}

.spr-article-detail--video .spr-article-detail__media,
.spr-article-detail--photo .spr-article-detail__media {
  margin-block-end: var(--space-small);

  @media (min-width: 768px) {
    grid-column: 2 / span 10;
  }
}

.spr-article-detail--photo .spr-article-detail__media {
  margin-block-end: calc(var(--space-large) * 1.5);
}

.spr-article-detail__content {
  display: grid;
  grid-column: 1 / span 4;

  @media (min-width: 768px) {
    grid-column: 2 / span 10;
  }

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

  @media (min-width: 1280px) {
    grid-column: 4 / span 6;
  }

  @supports (grid-template-columns: subgrid) {
    grid-template-columns: subgrid;

    & > * {
      grid-column: 1 / span 4;

      @media (min-width: 768px) {
        grid-column: 2 / span 10;
      }

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

      @media (min-width: 1280px) {
        grid-column: 4 / span 6;
      }
    }

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

@supports (grid-template-columns: subgrid) {
  .spr-article-detail__content .media--type-image {
    grid-column: 1 / span 4;

    img {
      overflow: hidden;
      border-radius: var(--radius);
    }

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

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

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

.spr-article-detail--video .spr-article-detail__content {
  display: block;

  @media (min-width: 768px) {
    grid-column: 2 / span 10;
  }
}