list-with-images.scss

.list-with-images {
  list-style: none;

  &__item {
    display: flex;
    align-items: center;
    margin-bottom: 5vh;

    &-icon img {
      max-width: 150px;
      margin-right: 4vh;
    }

    .description { margin: 1vh 0; }
    .message { text-align: left; }

    &_element {
      list-style: none;
      margin-bottom: 10px;
      padding: 0;
      padding-left: 10px;
      position: relative;

      &::before {
        background-color: $white;
        border: 1px solid $buzok;
        border-radius: 50%;
        content: '';
        height: 12px;
        left: -18px;
        position: absolute;
        top: 14px;
        transform: translateY(-50%);
        vertical-align: text-top;
        width: 12px;
      }
    }
  }
}

.list-with-images.horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .list-with-images__item {
    display: flex;
    flex-direction: column;
    max-width: 28%;
    .message { text-align: center; }

    .description {
      font-size: 1em;
      line-height: 1.6;
    }

    &-icon img { margin-right: 0; }
  }
}

@media screen and (max-width: 767px) {
  .list-with-images__item {
    flex-wrap: wrap;
    max-width: 400px;
    margin: 0 auto;

    &-icon {
      margin: 0 auto;

      img {
        max-width: 120px;
        margin-right: 0;
      }
    }
    .description { font-size: .8em; }
    .message { text-align: center; }
  }

  .list-with-images.horizontal {
    .list-with-images__item {
      max-width: 400px;
      width: 100%;

      .description { font-size: .8em; }
    }
  }
}

@media screen and (max-width: 767px) {
  .list-with-images.horizontal { justify-content: space-around; }

  .list-with-images__item-icon img { margin-right: 0; }
}