@mixin res($media) {
  @if $media == xs {
    @media (max-width: 380px) { @content; }
  }
  @if $media == s {
    @media (max-width: 480px) { @content; }
  }
  @else if $media == m {
    @media (min-width: 481px) and (max-width: 767px) { @content; }
  }
  @if $media == s-m {
    @media (max-width: 767px) { @content; }
  }
  @if $media == l {
    @media (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if $media == s-m-l {
    @media (max-width: 991px) { @content; }
  }
  @if $media == xl {
    @media (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if $media == xxl {
    @media (min-width: 1200px) and (max-width: 1350px) { @content; }
  }
  @if $media == xxl-xxxl {
    @media (min-width: 1200px) and (max-width: 1500px) { @content; }
  }
  @if $media == xl-xxl {
    @media (min-width: 992px) and (max-width: 1350px) { @content; }
  }
  @if $media == webflow {
    @media (min-width: 992px) and (max-width: 1350px) { @content; }
  }
  @if $media == width {
    @media (max-width: 1780px){ @content; }
  }
}