CSS Media Query Range Syntax

< evaluates if a value is less than another value

evaluates if a value is greater than another value
= evaluates if a value is equal to another value
<= evaluates if a value is less than or equal to another value
= evaluates if a value is greater than or equal to another value

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

@media (400px <= width <= 1000px) {
  /* etc. */
}

@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }
}

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 320px) { /* styles for viewports >= 320px */ }