.paragraph--type--stepped-blocks h2 {
  margin-top: 0;
}

.stepped-blocks__items,
.field--name-field-stepped-blocks-item {
  @media (min-width: 1200px) {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.stepped__image {
  margin-bottom: var(--spacing-3);
}

.paragraph--type--stepped-blocks h2 {
  max-width: 42rem;
}

.paragraph--type--stepped-blocks-item {
  margin-bottom: var(--spacing-8);

  @media (min-width: 768px) {
    max-width: 22.5rem;
    margin-bottom: 0;
  }

  @media (min-width: 1200px) {
    width: 32%;
    max-width: 27.5rem;
  }
}

.stepped__heading {
  margin-top: 0;
  margin-bottom: var(--spacing-3);
}

.stepped__content {
  margin-bottom: var(--spacing-3);
}

.paragraph--type--stepped-blocks-item .stepped__icon {
  color: var(--c-primary-orange);
  transform: rotate(90deg);
  width: 6rem;
  height: 6rem;
}

/* Modify button if blue background */
.paragraph--type--stepped-blocks.c-bg--blue .button {
  background-color: var(--bg-light);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-color);
}

.paragraph--type--stepped-blocks.c-bg--blue .button:hover {
  color: var(--c-body-primary);

  .button__icon {
    background: var(--c-body-primary);
    color: var(--c-body-invert);
  }
}

/* Hide first arrow and modify font size if checked */
.stepped-blocks--hide-first-arrow .paragraph--type--stepped-blocks-item:first-child {
  .stepped__icon {
    display: none;
  }

  .stepped__heading {
    font-size: var(--heading-h2);
  }
}

/* Arrow rotation */
@media (min-width: 768px) {
  .paragraph--type--stepped-blocks-item:nth-child(4n+1) .stepped__icon,
  .paragraph--type--stepped-blocks-item:nth-child(4n+2) .stepped__icon,
  .paragraph--type--stepped-blocks-item:nth-child(4n+3) .stepped__icon {
    transform: rotate(45deg);
  }

  .paragraph--type--stepped-blocks-item:nth-child(4n) .stepped__icon {
    transform: rotate(135deg);
  }
}

/* Spacing to create steps */
@media (min-width: 768px) {
  .paragraph--type--stepped-blocks-item:nth-child(4n+2),
  .paragraph--type--stepped-blocks-item:nth-child(4n) {
    margin-left: auto;
    margin-right: auto;
  }

  .paragraph--type--stepped-blocks-item:nth-child(4n+3) {
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .paragraph--type--stepped-blocks-item:nth-child(4n+2) {
    margin-top: var(--spacing-30);
  }

  .paragraph--type--stepped-blocks-item:nth-child(4n+2):last-child {
    margin-left: var(--spacing-8);
  }

  .paragraph--type--stepped-blocks-item:nth-child(4n+3) {
    margin-top: var(--spacing-60);
    margin-left: 0;
  }

  .paragraph--type--stepped-blocks-item:nth-child(4n) {
    width: 100%;
    max-width: 100%;

    .stepped__wrapper {
      width: 30%;
      max-width: 440px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}