scss example

.m-item {
  @import "/components/cart/cart-promocode";
  display: grid;
  grid-template-columns: 120px 1fr auto 200px;
  grid-template-rows: auto auto;
  padding: 20px;
  border-bottom: 1px solid $success-100;
  &:last-child{
    border-bottom: none;
  }


  @include media-breakpoint-down(desktop){
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto auto auto;
    border: none;
    padding: 0;
  }
  // .m-item__img
  &__img {
    height: 180px;
    grid-column: 1 / 2;
    grid-row: 1 / 3;

    @include media-breakpoint-down(desktop) {
      grid-row: 1 / 4;
    }
  }

  // .m-item__info
  &__info {
    padding-left: 20px;
    @include media-breakpoint-down(desktop) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      padding-left: 12px;
    }
  }

  // .m-item__text
  &__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    padding-bottom: 8px;
  }

  // .m-item__text--bold
  &__text--bold {
    font-weight: 600;
    line-height: 18px;
  }

  // .m-item__discount
  &__discount {
    @include media-breakpoint-down(desktop) {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
      padding-left: 12px;
      align-self: flex-end;
    }
    .cart-promocode{
      cursor: auto;
    }
  }

  // .m-item__price
  &__price {
    @include media-breakpoint-down(desktop) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      padding-left: 12px;
    }
  }

  &__badges {
    align-self: flex-end;
    grid-row: 2 / 3;
    grid-column: 2 / 5;
    display: flex;
    gap: 10px;
    padding-left: 20px;

    @include media-breakpoint-down(desktop) {
      grid-column: 1 / 3;
      grid-row: 4 / 5;
      padding-left: 0;
      padding-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

   
}