.grid {
  --grid-max-col-count: 3;
  --grid-min-col-size: 200px;
  --grid-gap: 1rem;

  /* calculations, do not touch */
  --grid-col-size-calc: calc(
    (100% - var(--grid-gap) * var(--grid-max-col-count)) /
      var(--grid-max-col-count)
  );
  --grid-col-min-size-calc: min(
    100%,
    max(var(--grid-min-col-size), var(--grid-col-size-calc))
  );

  display: grid;
  gap: var(--grid-gap);

  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-col-min-size-calc), 1fr)
  );
}

: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%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  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;
  /*   @media (width > 760px) { */
  grid-template-columns: 1fr 240px;
  /*   } */
}

aside {
  padding: 1rem;
  border-radius: 0.5rem;
  background: dodgerblue;
}

.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);
}

.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;
}