:root {
  --clr-yellow: hsl(47, 88%, 63%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-gray-500: hsl(0, 0%, 42%);
  --clr-gray-950: hsl(0, 0%, 7%);

  --font-size-small: clamp(0.8333rem, 0.7004rem + 0.6447vw, 1rem);
  --font-size: clamp(1rem, 0.8187rem + 0.8791vw, 1.25rem);;
  --font-size-large: clamp(1rem, 0.85rem + 0.9vw, 1.5rem);;

  --font-family: 'Figtree';
  --font-weight-normal: 500;
  --font-weight-bold: 800;
  --line-height: 150%;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 14px;
}

@font-face {
  font-family: 'Figtree';
  src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('woff2');
  font-weight: var(--font-weight-normal);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;

  background-color: var(--clr-yellow);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

article {
  width: 330px;
  min-height: 500px;
  padding: 1.5rem;

  background-color: white;
  border: 1px solid black;
  border-radius: 20px;
  box-shadow: 9px 9px 0 black;
}

@media screen and (width >= 600px) {
  article {
    width: 385px;
    min-height: 525px;
  }
}

header {
  > img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-block-end: 1.5rem;
  }

  > span {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    background-color: var(--clr-yellow);
    border-radius: 4px;
    margin-bottom: 1rem;
  }

  > p {
    font-size: var(--font-size-small);
    margin-bottom: 1rem;
  }

  > h2 {
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    font-size: var(--font-size-large);
  }
}

article > p {
  color: var(--clr-gray-500);
  margin-bottom: 1.5rem;
}

footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);

  span {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-small);
  }

  img {
    width: 32px;
    aspect-ratio: 1;
  }
}