Generated by SassMeister.com. (utility builder)

input.scss

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors
$grey3: grey;

// Additionnal "utility" breakpoints aliases
// ex. @include respond-to("medium-up") {...}
$bp-aliases: (
  'tiny-small'   : (max-width: #{$tiny-small - 1}),
  'tiny-medium'   : (max-width: #{$tiny-medium - 1}),
  'tiny'   : (max-width: #{$tiny - 1}),
  'small'  : (max-width: #{$small - 1}),
  'medium' : (max-width: #{$medium - 1}),
  'large' : (max-width: #{$large - 1}),
  'extra-large'  : (max-width: #{$extra-large - 1}),
  'tiny-small-up'   : (min-width: #{$tiny-small}),
  'tiny-medium-up'   : (min-width: #{$tiny-medium}),
  'tiny-up'   : (min-width: #{$tiny}),
  'small-up'  : (min-width: #{$small}),
  'medium-up' : (min-width: #{$medium}),
  'large-up' : (min-width: #{$large}),
  'extra-large-up' : (min-width: #{$extra-large}),
  'retina' : (min-resolution: 2dppx)
);

// MIXINS

// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
@mixin respond-to($name) {
  // If the key exists in the map
  @if map-has-key($bp-aliases, $name) {
    // Prints a media query based on the value
    @media #{inspect(map-get($bp-aliases, $name))} {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$name}`. "
        + "Please make sure it is defined in `$bp-aliases` map.";
  }
}


// OUTPUT

html{
  font-size: 62.5%;
  box-sizing: border-box;
}

.container{
  max-width: 96rem;
  margin: 0 auto;
  
  //border: 1px solid red;
}

.headline{
  font-size: 3rem;
}


$lined-border-default: 1px solid black !default;
.lined{
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  &:after,
  &:before{
    content:'';
    display: block;
    height: 1px;
    width: auto;
    border-bottom: $lined-border-default;
  }
}
.lined.lined--right:after,
.lined.lined--left:before{
      flex-grow: 1;
}
.lined[class$=--right]{
    &:after{
      margin-left: 2rem;    
    }
}
.lined[class$=--left]{
    &:before{
      margin-right: 2rem;    
    }
}

/* RESPONSIVE LINED */
@each $bp in 'small-up','medium-up'{
  @include respond-to($bp){
    .lined.lined-#{$bp}--right::after,
    .lined.lined-#{$bp}--left::before{
      flex-grow: 1;
    }
  }
}
  



/**
 * Borders
 *
 * .border -  border all
 * .border-top -
 * .border-bottom
 * .border-[small-up|medium-up]-[top|bottom]
 *
 */
$border-color-default: $grey3 !default;
$border-width-default: 1px !default;

$border-color-default: #E5E5E5;
.border{
  border: $border-width-default solid $border-color-default;
  &-bottom{
    border-bottom: $border-width-default solid $border-color-default;
  }
  &-top{
    border-top: $border-width-default solid $border-color-default;
  }
}
@each $bp in 'small-up','medium-up'{
    @include respond-to($bp){
        .border-#{$bp}{
            border: $border-width-default solid $border-color-default;
        }
        @each $direction in 'top','bottom'{
          .border-#{$bp}-#{$direction}{
            border-#{$direction}: $border-width-default solid $border-color-default;    
          }
        }
    }
}

/* flex responsive utilities */

$utilities: (
    'flex-wrap': (
        'prefix': 'flex',
        'propertie': 'flex-wrap',
        'values': wrap nowrap,
        'important': true,
        'responsive': true
    ),
    'flex-direction': (
        'prefix': 'flex',
        'propertie': 'flex-direction',
        'values': row column,
        'important': true,
        'responsive': true
    ),
    'justify-content': (
        'prefix': 'justify-content',
        'propertie': 'justify-content',
        'values': (
            'between':'space-between',
            'around': 'space-around'
        ),
        'important': true,
        'responsive': true
    ),
);

@each $utility,$options in $utilities{
    $prefix: if(map-get($options,'prefix'),map-get($options,'prefix')+'-','');
    $propertie: map-get($options,'propertie');
    $important: if(map-get($options,'important'),'!important',null);

    @if type-of(map-get($options,'values')) == 'map'{
        @each $shorthand, $value in map-get($options,'values') {
            .#{$prefix}#{$shorthand}{
                #{$propertie}: #{$value} #{$important};
            }
        }
    }@else{
        @each $values in map-get($options,'values'){
            @each $value in $values{
                .#{$prefix}#{$value}{
                    #{$propertie}: #{$value} #{$important};
                }
            }
        }
    }
    

    @if map-get($options,'responsive') == true{
        @each $bp in 'small','small-up'{
            @include respond-to($bp){
                @each $value in map-get($options,'values'){
                    .#{$prefix}#{$bp}-#{$value}{
                        #{$propertie}: #{$value} #{$important};
                    }
                }
            }
        }
    }
}

output.css

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

.container {
  max-width: 96rem;
  margin: 0 auto;
}

.headline {
  font-size: 3rem;
}

.lined {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.lined:after, .lined:before {
  content: "";
  display: block;
  height: 1px;
  width: auto;
  border-bottom: 1px solid black;
}

.lined.lined--right:after,
.lined.lined--left:before {
  flex-grow: 1;
}

.lined[class$="--right"]:after {
  margin-left: 2rem;
}

.lined[class$="--left"]:before {
  margin-right: 2rem;
}

/* RESPONSIVE LINED */
@media (min-width: 768px) {
  .lined.lined-small-up--right::after,
.lined.lined-small-up--left::before {
    flex-grow: 1;
  }
}
@media (min-width: 1024px) {
  .lined.lined-medium-up--right::after,
.lined.lined-medium-up--left::before {
    flex-grow: 1;
  }
}
/**
 * Borders
 *
 * .border -  border all
 * .border-top -
 * .border-bottom
 * .border-[small-up|medium-up]-[top|bottom]
 *
 */
.border {
  border: 1px solid #E5E5E5;
}
.border-bottom {
  border-bottom: 1px solid #E5E5E5;
}
.border-top {
  border-top: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  .border-small-up {
    border: 1px solid #E5E5E5;
  }

  .border-small-up-top {
    border-top: 1px solid #E5E5E5;
  }

  .border-small-up-bottom {
    border-bottom: 1px solid #E5E5E5;
  }
}
@media (min-width: 1024px) {
  .border-medium-up {
    border: 1px solid #E5E5E5;
  }

  .border-medium-up-top {
    border-top: 1px solid #E5E5E5;
  }

  .border-medium-up-bottom {
    border-bottom: 1px solid #E5E5E5;
  }
}
/* flex responsive utilities */
.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

@media (max-width: 767px) {
  .flex-small-wrap {
    flex-wrap: wrap !important;
  }

  .flex-small-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media (min-width: 768px) {
  .flex-small-up-wrap {
    flex-wrap: wrap !important;
  }

  .flex-small-up-nowrap {
    flex-wrap: nowrap !important;
  }
}
.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

@media (max-width: 767px) {
  .flex-small-row {
    flex-direction: row !important;
  }

  .flex-small-column {
    flex-direction: column !important;
  }
}
@media (min-width: 768px) {
  .flex-small-up-row {
    flex-direction: row !important;
  }

  .flex-small-up-column {
    flex-direction: column !important;
  }
}
.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

@media (max-width: 767px) {
  .justify-content-small-between space-between {
    justify-content: between space-between !important;
  }

  .justify-content-small-around space-around {
    justify-content: around space-around !important;
  }
}
@media (min-width: 768px) {
  .justify-content-small-up-between space-between {
    justify-content: between space-between !important;
  }

  .justify-content-small-up-around space-around {
    justify-content: around space-around !important;
  }
}

settings.json

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