@mixin flex($gap: 0, $justify-content: initial, $align-items: initial, $dir: row) {
  display: flex;
  gap: $gap;
  flex-direction: $dir;
  justify-content: $justify-content;
  align-items: $align-items;
}

// MEDIA QUERIES

// 1000px = 62.5em - tab-land
// 720px = 45em - tab-port
// 600px = 37.5em - phablet
// 450px = 28em - phone

@mixin respond($breakpoint) {
  @if $breakpoint == tab-land {
    @media only screen and (max-width: 62.5em) {
      @content;
    }
  }

  @if $breakpoint == tab-port {
    @media only screen and (max-width: 45em) {
      @content;
    }
  }

  @if $breakpoint == phablet {
    @media only screen and (max-width: 37.5em) {
      @content;
    }
  }

  @if $breakpoint == phone {
    @media only screen and (max-width: 28em) {
      @content;
    }
  }
}
