.mm-columns-with-image-wrapper {
  img {
    width: 100%;
    height: auto;
  }

  .mm-container {
    padding: 0 20px;
    max-width: 78rem;
    margin: 0 auto;
  }

  .mm-desktop {
    display: none;
  }

  .mm-heading {
    margin-bottom: 25px;
    text-align: center;

    * {
      font-family: var(--ss-font-heading-family);
      font-weight: 800;
      line-height: 110%;
      font-size: 28px;
      letter-spacing: -0.28px;
    }
  }

  .mm-columns-with-image-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .mm-column-image {
    order: -1;
  }

  .mm-column-text {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .mm-column-title {
    margin-bottom: 15px;

    * {
      font-family: var(--ss-font-body-family);
      font-size: 20px;
      color: #282828;
    }
  }

  .mm-column-description {
    * {
      font-family: var(--ss-font-body-family);
      font-size: 14px;
      color: #5A5A5A;
      line-height: 130%;
    }
  }

  @media (min-width: 768px) {
    .mm-columns-with-image-content {
      flex-direction: row;
    }

    .mm-column-image {
      order: initial;
      align-self: center;
    }

    .mm-mobile {
      display: none;
    }

    .mm-desktop {
      display: block;
    }

    .mm-columns-with-image-content {
      counter-reset: step-counter;
    }

    .mm-column-text .mm-column-item {
      counter-increment: step-counter;
      position: relative;
      padding-left: 20px;
    }

    .mm-column-text .mm-column-item::after {
      content: counter(step-counter) ".";
      position: absolute;
      left: -5px;
      top: -5px;
      color: #282828;
      font-weight: bold;
      font-size: 22px;
      font-family: var(--ss-font-body-family);
    }
  }

  @media (min-width: 992px) {
    .mm-columns-with-image-content {
      align-items: center;
    }

    .mm-heading {
      margin-bottom: 44px;

      * {
        font-size: 46px;
      }
    }

    .mm-column-title * {
      font-size: 24px;
    }

    .mm-column-description * {
      font-size: 18px;
    }

    .mm-column-text {
      width: 30%;
    }

    .mm-column-image {
      width: 40%;
    }
  }
}