Generated by SassMeister.com.

input.scss

$bp_xs: 600px;
$bp_sm: 960px;
$bp_md: 1280px;
$bp_lg: 1920px;
$bp_xl: 3200px;
$bp_xxl: 5760px;

@mixin bp_lt-xs {
  @media screen and (max-width: #{$bp_xs - 1px}) {
    @content;
  }
}

@mixin bp_xs {
  @media screen and (min-width: #{$bp_xs}) and (max-width: #{$bp_sm - 1px}) {
    @content;
  }
}

@mixin bp_sm {
  @media screen and (min-width: #{$bp_sm}) and (max-width: #{$bp_md - 1px}) {
    @content;
  }
}

.container {
    display: flex;
    flex-wrap: wrap;
    // gap: 12px;
    width: 100%;
    border: 2px solid black;
    > div {
        height: 40px;
        flex-basis: 25%;
        text-align: left;
        line-height: 40px;
        @include bp_lt-xs {
            flex-basis: 100%;
            text-align: center;
        }
    }
    @include bp_lt-xs {
        border: 1px dotted grey;
    }
}

%mainItems {
    @include bp_xs {
        height: 60px;
        flex-basis: 50%;
        text-align: center;
        font: {
            size: 28px;
        }
    }
}

%secondaryItems {
    @include bp_xs {
        flex-basis: 25%;
        font: {
            size: 18px;
        }
    }
}

.container > .alpha {
    background-color: aqua;
    @extend %mainItems;
    @include bp_lt-xs {
        font-weight: bold;
    }
}

.container > .bravo {
    background-color: burlywood;
    @extend %mainItems;
}

.container > .charlie {
    background-color: cadetblue;
    @extend %secondaryItems;
}

.container > .delta {
    background-color: darkseagreen;
    @extend %secondaryItems;
}

markup.html

<div class="container extender-class">
    <div class="alpha">alpha</div>
    <div class="bravo">bravo</div>
    <div class="charlie">charlie</div>
    <div class="delta">delta</div>
</div>

output.css

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 2px solid black;
}
.container > div {
  height: 40px;
  flex-basis: 25%;
  text-align: left;
  line-height: 40px;
}
@media screen and (max-width: 599px) {
  .container > div {
    flex-basis: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 599px) {
  .container {
    border: 1px dotted grey;
  }
}

@media screen and (min-width: 600px) and (max-width: 959px) {
  .container > .bravo, .container > .alpha {
    height: 60px;
    flex-basis: 50%;
    text-align: center;
    font-size: 28px;
  }
}

@media screen and (min-width: 600px) and (max-width: 959px) {
  .container > .delta, .container > .charlie {
    flex-basis: 25%;
    font-size: 18px;
  }
}

.container > .alpha {
  background-color: aqua;
}
@media screen and (max-width: 599px) {
  .container > .alpha {
    font-weight: bold;
  }
}

.container > .bravo {
  background-color: burlywood;
}

.container > .charlie {
  background-color: cadetblue;
}

.container > .delta {
  background-color: darkseagreen;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}