.text-block {
  grid-row-gap: var(--spacing-4);
}

.text-block--image-right .text-block__image {
  order: -1;
}

.text-block.c-bg--blue .button--icon {
  color: var(--c-body-primary);
}

.text-block .text-block__image img {
  border-radius: var(--border-radius);
}

.text-block .text-block__heading {
  margin-bottom: var(--spacing-2);
  margin-top: 0
}

.text-block .text-block__description {
  margin-bottom: var(--spacing-4);
}

.text-block .text-block__description ul li::marker {
  color: var(--c-primary-orange);
}

.text-block .text-block__button {
  font-size: var(--text-cta);
  margin: 0;
}

.text-block--square video {
  width: 100%;
}

.text-block .video-container {
  position: relative;
  height: fit-content;
  width: 100%;
}

.text-block .video-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.text-block__image,
.text-block__content-wrapper {
  grid-column: span 8;
}

@media (min-width: 540px) {
  .text-block--square {
    grid-row-gap: var(--spacing-5);
  }

  /* Image left alignment. */
  .text-block--image-left .text-block__image {
    grid-column: span 5;
  }

  .text-block--image-left .text-block__content-wrapper{
    grid-column: span 6 / -1;
  }

  /* Image right alignment. */
  .text-block--image-right .text-block__image {
    grid-column: span 5 / -1;
  }

  .text-block--image-right .text-block__content-wrapper {
    grid-column: span 6;
  }
}

@media (min-width: 992px) {
  /* Image left alignment. */
  .text-block--image-left .text-block__image {
    grid-column: span 3;
  }

  .text-block--image-left .text-block__content-wrapper {
    grid-column: span 4 / -1;
  }

  /* Image right alignment. */
  .text-block--image-right .text-block__image {
    order: 0;
    grid-column: span 3 / -1;
  }

  .text-block--image-right .text-block__content-wrapper {
    grid-column: span 4;
  }

  /* No image. */
  .text-block--no-image .text-block__content-wrapper {
    grid-column: span 4;
  }

  /* No image and centred. */
  .text-block--no-image.text-block--centred .text-block__content-wrapper {
    grid-column: span 4 / -3;
  }
}

@media (min-width: 1440px) {
  .text-block {
    grid-column-gap: var(--spacing-4);
  }
}