/* figtree font  */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

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

  /* typography */
  --ff: 'Figtree', sans-serif;
  --fw-500: 500;
  --fw-800: 800;
  --lh: 150%;
  --clamp-1: clamp(1.25rem, 0.3756vw + 1.1616rem, 1.5rem);
  --clamp-2: clamp(0.875rem, 0.1878vw + 0.8308rem, 1rem);
  --clamp-3: clamp(0.75rem, 0.1878vw + 0.7058rem, 0.875rem);
  --text-preset-1: var(--fw-800) var(--clamp-1) / var(--lh) var(--ff);
  --text-preset-2: var(--fw-500) var(--clamp-2) / var(--lh) var(--ff);
  --text-preset-3: var(--fw-500) var(--clamp-3) / var(--lh) var(--ff);
  --text-preset-4: var(--fw-800) var(--clamp-3) / var(--lh) var(--ff);

  /* sizes and spacing */
  --sm: 4px;
  --md: 8px;
  --lg: 12px;
  --base: 16px;
  --border-radius: 20px;
  --xl: 24px;
}

/* css reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: grid;
  padding: var(--xl);
  min-height: 100dvh;
  background: var(--color-yellow);
  font-family: var(--ff);
  place-items: center;
}
img {
  display: block;
  max-width: 100%;
}

/* card styles */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--xl);
  padding: var(--xl);
  max-width: 24rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-950);
  border-radius: var(--border-radius);
  box-shadow: var(--md) var(--md) 0px 0px var(--color-gray-950);
  color: var(--color-gray-950);
  transition: box-shadow 0.2s ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  &:hover {
    box-shadow: var(--base) var(--base) 0px 0px var(--color-gray-950);
  }
}

/* card header  */
.card__img-container img {
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
  border-radius: calc(var(--border-radius) / 2);
}

/* card body  */
.card__content {
  display: grid;
  gap: var(--lg);

  .card__tag {
    padding: var(--sm) var(--lg);
    width: fit-content;
    background: var(--color-yellow);
    border-radius: var(--sm);
    font: var(--text-preset-4);
  }

  .card__date {
    font: var(--text-preset-3);
  }

  .card__title {
    font: var(--text-preset-1);

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s ease;

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &:hover {
        color: var(--color-yellow);
        cursor: pointer;
      }
    }
  }

  .card__description {
    color: var(--color-gray-500);
    font: var(--text-preset-2);
  }
}

/* card fiooter */
.card__footer {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--lg);

  .card__img--author {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }

  .card__author-name {
    font: var(--text-preset-4);
  }
}