.text-multicolumn {
  position: relative;

  .vertical-text {
    margin-top: 113px;
  }

  .vertical-text {
    color: #d15e5e;

    &::before {
      background-color: #d15e5e;
    }
  }

  h2 {
    text-align: center;
    margin: 0 0 3rem;

    @media screen and (min-width: 520px) {
      margin: 0 0 5rem;
    }

    em {
      text-transform: capitalize;
    }
  }

  .text-multicolumns {
    --gap: 2rem;

    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    line-height: 1.7;

    @media screen and (min-width: 768px) {
      --gap: 2.7rem;
    }

    &::before {
      content: '';
      position: absolute;
      top: 10.6rem;
      bottom: -11rem;
      left: 50%;
      width: 9999px;
      transform: translateX(-50%);
      background-color: var(--color-red);
      z-index: -1;

      @media screen and (min-width: 768px) {
        top: 10.6rem;
        bottom: -22.3rem;
      }
    }

    .text-multicolumn__item {
      width: 100%;
      background-color: var(--color-black);
      padding: 3rem 2rem 2rem;
      text-align: center;
      color: var(--color-white);

      @media screen and (min-width: 768px) {
        width: calc(50% - var(--gap) * 2 / 3);
      }

      @media screen and (min-width: 990px) {
        width: calc(33.33% - var(--gap) * 2 / 3);
        padding: 3.5rem 2.5rem 4.9rem;
      }
    }
  }

  .multicolumn-item__image-wrapper {
    max-width: 8rem;
    margin: 0 auto 3.4rem;

      @media screen and (min-width: 520px) {
        max-width: 13rem;
        margin: 0 auto 3.4rem;
      }
  }

  h3 {
    text-transform: uppercase;
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0 0 1.6rem;

    @media screen and (min-width: 768px) {
      min-height: 5.5rem;
      font-size: 1.8rem;
    }

    @media screen and (min-width: 990px) {
      min-height: 5.5rem;
      font-size: 2.1rem;
    }
  }

  p {
    margin: 0 0 2rem;
  }
}