challenge-vtex-io-saulo-klein/styles/sass/pages/product/vtex.flex-layout.scss

.flexRow {
  .flexCol {
    &--info-availability,
    &--rightCol {
      position: relative;
    }
  }

  &--shelf-product-row {
    padding: 0 40px;
    margin: 16px 0 0;

    @include mq(xl, min) {
      padding: 0 360px;
    }
  }

  .flexRowContent--productPanel {
    padding: 0 40px;
    gap: 32px;

    @include mq(xl, min) {
      margin: 16px 0px;
      padding: 0 360px;
    }

    @include mq(lg, max) {
      flex-direction: column;
    }

    .stretchChildrenWidth {
      @include mq(lg, max) {
        width: 100% !important;
      }

      &:first-child {
        padding: 0;
        justify-content: normal;
      }
    }

    .flexCol--productShowcase {
      @include mq(lg, max) {
        padding: 0;
      }
    }
  }

  .flexRowContent--quantityAndBuy {
    margin: 0 0 16px;

    .stretchChildrenWidth {
      width: auto !important;

      &:last-child {
        flex: 1;

        @include mq(sm, max) {
          margin: 10px 0 0;
        }
      }
    }
  }

  .flexRowContent--productName {
    margin: 0;
  }
}