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

:root {
  /* Font Families */
  --ff-figtree: 'Figtree', sans-serif;

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

  /* Text Presets */
  --text-preset-1: 800 1.5rem / 1.5 var(--ff-figtree);
  --text-preset-2: 500 1rem / 1.5 var(--ff-figtree);
  --text-preset-3: 500 .875rem / 1.5 var(--ff-figtree);
  --text-preset-3-bold: 800 .875rem / 1.5 var(--ff-figtree);
}

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

body {
  min-height: 100vh;
  background-color: var(--clr-yellow);
  font: var(--text-preset-2);
}

h1, h2, h3, h4,
button, input, label {
  line-height: 1;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img,
picture {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

a {
  text-decoration: none;
  color: inherit;
}

.main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 24rem;
  padding: 0 1.5rem;
}

@media (min-width: 40rem) {
  .container {
    padding: 0;
  }
}

.card {
  background-color: var(--clr-white);
  border-radius: 1.25rem;
  border: 1px solid var(--clr-gray-950);
  box-shadow: .5rem .5rem 0 rgba(0, 0, 0, 1);
  margin: 2rem 0;
}

.card__container {
  padding: 1.5rem;
}

.card__img-container {
  width: 100%;
  height: 200px;
  border-radius: .625rem;
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding-top: 1.5rem;
}

.card__category {
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 800;
  background-color: var(--clr-yellow);
  border-radius: .25rem;
  padding: .375rem .75rem;
}

@media (min-width: 40rem) {
  .card__category {
    font: var(--text-preset-3-bold);
  }
}

.card__date {
  margin-top: .75rem;
  font-size: .75rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .card__date {
    font: var(--text-preset-3);
  }
}

.card__title {
  margin-top: .75rem;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 800; 
}

.card__title:hover {
  color: var(--clr-yellow);
}

@media (min-width: 40rem) {
  .card__title {
    font: var(--text-preset-1);
  }
}

.card__description {
  font: var(--text-preset-3);
  margin-top: .75rem;
  color: var(--clr-gray-500);
}

@media (min-width: 40rem) {
  .card__description {
    font: var(--text-preset-2);
  }
}

.card__author {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.card__author-img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

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