/* Width in PX > 360px */
/* ==== = MINIME = ==== */
@media only screen and (min-width: 22.56em) {
  .xs-disappear,
  .flex.xs-disappear,
  .grid.xs-disappear {
    display: none;
  }

  .xs-appear,
  .flex.xs-appear,
  .grid.xs-appear {
    display: block;
  }

  .xs-flex-appear,
  .flex.xs-flex-appear,
  .grid.xs-flex-appear {
    display: flex;
  }

  .xs-grid-appear,
  .flex.xs-grid-appear,
  .grid.xs-grid-appear {
    display: grid;
  }
}

/* Width in PX > 480px */
/* ==== = TINY = ==== */
@media only screen and (min-width: 30em) {
  .sm-disappear,
  .flex.sm-disappear,
  .grid.sm-disappear {
    display: none;
  }

  .sm-appear,
  .flex.sm-appear,
  .grid.sm-appear {
    display: block;
  }

  .sm-flex-appear,
  .flex.sm-flex-appear,
  .grid.sm-flex-appear {
    display: flex;
  }

  .sm-grid-appear,
  .flex.sm-grid-appear,
  .grid.sm-grid-appear {
    display: grid;
  }
}

/* Width in PX > 768px */
/* ==== = MEDIUM = ==== */
@media only screen and (min-width: 48em) {
  .md-disappear,
  .flex.md-disappear,
  .grid.md-disappear {
    display: none;
  }

  .md-appear,
  .flex.md-appear,
  .grid.md-appear {
    display: block;
  }

  .md-flex-appear,
  .flex.md-flex-appear,
  .grid.md-flex-appear {
    display: flex;
  }

  .md-grid-appear,
  .flex.md-grid-appear,
  .grid.md-grid-appear {
    display: grid;
  }
}

/* Width in PX > 920px */
/* ==== = BIG = ==== */
@media only screen and (min-width: 62em) {
  .bg-disappear,
  .flex.bg-disappear,
  .grid.bg-disappear {
    display: none;
  }

  .bg-appear,
  .flex.bg-appear,
  .grid.bg-appear {
    display: block;
  }

  .bg-flex-appear,
  .flex.bg-flex-appear,
  .grid.bg-flex-appear {
    display: flex;
  }

  .bg-grid-appear,
  .flex.bg-grid-appear,
  .grid.bg-grid-appear {
    display: grid;
  }

  /* Header */
  .home-header {
    position: relative;
    background-color: var(--header);
  }
}

/* Width in PX > 1200px */
/* ==== = LARGE = ==== */
@media only screen and (min-width: 75em) {
  .l-disappear,
  .flex.l-disappear,
  .grid.l-disappear {
    display: none;
  }

  .l-appear,
  .flex.l-appear,
  .grid.l-appear {
    display: block;
  }

  .l-flex-appear,
  .flex.l-flex-appear,
  .grid.l-flex-appear {
    display: flex;
  }

  .l-grid-appear,
  .flex.l-grid-appear,
  .grid.l-grid-appear {
    display: grid;
  }
}

/* Width in PX > 1920px */
/* ==== = EXTRA LARGE = ==== */
@media only screen and (min-width: 121em) {
  .xl-disappear,
  .flex.xl-disappear,
  .grid.xl-disappear {
    display: none;
  }

  .xl-appear,
  .flex.xl-appear,
  .grid.xl-appear {
    display: block;
  }

  .xl-flex-appear,
  .flex.xl-flex-appear,
  .grid.xl-flex-appear {
    display: flex;
  }

  .xl-grid-appear,
  .flex.xl-grid-appear,
  .grid.xl-grid-appear {
    display: grid;
  }
}