:root {
  --clr-primary-900: hsl(200, 23%, 8%);
  --clr-primary-800: hsl(206, 23%, 12%);
  --clr-primary-700: hsl(206, 23%, 18%);
  --clr-primary-600: hsl(206, 23%, 26%);
  --clr-primary-500: hsl(206, 23%, 32%);
  --clr-primary-400: hsl(206, 23%, 45%);
  --clr-primary-300: hsl(206, 23%, 65%);
  --clr-primary-200: hsl(206, 23%, 85%);
  --clr-primary-100: hsl(206, 23%, 92%);

  --clr-accent-600: hsl(183, 40%, 20%);
  --clr-accent-500: hsl(183, 40%, 32%);
  --clr-accent-400: hsl(183, 40%, 45%);
  --clr-accent-300: hsl(183, 40%, 58%);
  --clr-accent-200: hsl(183, 40%, 80%);
}

* {
  margin: 0;
}

html {
  color-scheme: dark;
}

body {
  font-family: system-ui;
  line-height: 1.7;
  background: var(--clr-primary-900);
  color: var(--clr-primary-200);

  padding: 4rem 0;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  color: var(--clr-primary-100);
}

h1,
h2 {
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.75rem, 10vw - 1rem, 4.5rem);
}

h1 + p {
  font-size: 1.275rem;
  margin-block: 1rem 3.25rem;
}

h3 {
  line-height: 1.35;
}

.wrapper {
  width: min(100% - 4rem, 85rem);
  margin-inline: auto;
}

.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 240px;
}

aside {
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--clr-primary-700);
}

.flex-group {
  display: flex;
  gap: 1rem;
}

.space-between {
  justify-content: space-between;
}

.v-center {
  align-items: end;
}

.button {
  font: inherit;
  line-height: 1;
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 1.25em 0.7em;
  border-radius: 0.25em;
  color: var(--button-color, var(--clr-primary-100));
}

.button[data-type="outline"] {
  --button-color: var(--clr-accent-300);

  font-weight: 700;
  background: transparent;
  border: 2px solid var(--button-color);
}

.button[data-type="outline"]:hover,
.button[data-type="outline"]:focus {
  background: var(--button-color);
  color: var(--clr-primary-800);
}

.grid {
  display: grid;
  /* we have to be careful with this, it mucks with the tab order */
  grid-auto-flow: dense;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  grid-auto-rows: 120px auto auto;
  container-type: inline-size;
}

.product {
  --_padding: 1rem;

  grid-row: span 3;

  display: grid;
  grid-template-rows: subgrid;
  gap: 1rem;
  background: var(--clr-primary-700);
  border-radius: 0.5rem;
  overflow: hidden;
}

.product > :not(img) {
  margin-inline: var(--_padding);
}

.product > :last-child:not(img) {
  margin-block-end: var(--_padding);
}

.product > img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.product__price {
  line-height: 1;
}

.product__price span {
  display: block;
  font-size: 2rem;
  color: var(--clr-accent-300);
  font-weight: 900;
}

.product__description {
  display: none;
}

.product[data-featured="true"] {
  @container (min-width: 850px) {
    grid-column: span 2;
    grid-template-columns: subgrid;

    > img {
      grid-column: 1 / -1;
    }

    > .product__title {
      font-size: 2rem;
      grid-column: 1 / -1;
    }

    .product__description {
      display: block;
      margin-bottom: var(--_padding);
    }
  }

  @container (min-width: 1000px) {
    grid-column: span 3;

    .product__description {
      grid-column: span 2;
    }
  }
}