.spiral-section-headline {
  grid-column: 3 / span 4;
  grid-row: 1 / span 1;
  margin: 0;
  margin-bottom: var(--s-sm);
}

.spiral-section-description {
  grid-column: 3 / span 4;
  grid-row: 2 / span 1;
}

.spiral-section-spiral-img-wrapper {
  grid-column: 7 / span 6;
  grid-row: 1 / span 3;
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

.spiral-section-background-img-wrapper {
  grid-column: 1 / span 14;
  grid-row: 3 / span 1;
  margin-top: calc(2 * var(--s-lg));
}

.spiral-section-background-img-wrapper img,
.spiral-section-spiral-img-wrapper img {
  width: 100%;
  height: auto;
}

.spiral-section-spiral-link {
  position: absolute;
}

.editor-styles-wrapper .spiral-section-spiral-link {
  background-color: var(--black);
  opacity: 0.25;
}

@media (max-width: 1199.98px) {
  .spiral-section-headline,
  .spiral-section-description {
    grid-column: 2 / span 5;
  }

  .spiral-section-spiral-img-wrapper {
    grid-column: 7 / span 7;
  }
}

@media (max-width: 767.98px) {
  .spiral-section-headline,
  .spiral-section-description,
  .spiral-section-spiral-img-wrapper {
    grid-column: 3 / span 10;
    grid-row: unset;
  }

  .spiral-section-background-img-wrapper {
    grid-row: 4 / span 1;
    margin-top: var(--s-sm);
  }

  .spiral-section-spiral-img-wrapper {
    margin-top: var(--s-sm);
  }
}

@media (max-width: 575.98px) {
  .spiral-section-headline,
  .spiral-section-description,
  .spiral-section-spiral-img-wrapper {
    grid-column: 2 / span 12;
  }
}