Container Query Builder

/* Parent container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Child styles */
.card {
  /* default (narrow) styles */
}

@container card (min-width: 300px) {
  .card {
    /* styles at 300px+ */
  }
}

@container card (min-width: 500px) {
  .card {
    /* styles at 500px+ */
  }
}

@container card (min-width: 700px) {
  .card {
    /* styles at 700px+ */
  }
}

/* Browser support: Chrome 105+, Safari 16+, Firefox 110+ */
/* Polyfill: @oddbird/container-queries-polyfill */