scss Gutenberg Bootstrap 3

Posted 2021-05-17

$lg: "min-width: 1200px";
$md: "max-width: 1199px";
$sm: "max-width: 991px";
$xs: "max-width: 767px";


.wp-block-columns {
  margin: 0 -15px 15px -15px;
  .wp-block-column {
    margin: 0!important;
    padding: 0 15px 0 15px;
  }
  //.wp-block-column:not(:first-child) {
  //  margin-left: 15px;
  //}
  //.wp-block-column:not(:last-child) {
  //  margin-right: 15px;
  //}

  @media ($md) {
    &.has-6-columns {
      flex-wrap: wrap;
      .wp-block-column {
        flex-basis: 33.33%;
      }
    }
  }
  @media ($sm) {
    &.has-4-columns {
      flex-wrap: wrap;
      .wp-block-column {
        flex-basis: 50%;
      }
    }
    &.has-3-columns, &.has-5-columns, &.has-6-columns {
      flex-wrap: wrap;
      .wp-block-column {
        flex-basis: 100%;
      }
    }
  }
  @media ($xs) {
    &.has-2-columns, &.has-3-columns, &.has-4-columns, &.has-5-columns, &.has-6-columns {
      flex-wrap: wrap;
      .wp-block-column {
        flex-basis: 100%;
      }
    }
  }

}