* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; /* Range of weights supported */
  font-style: normal;
}
@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/Figtree-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900; /* Range of weights supported */
  font-style: italic;
}
:root {
  --clr-yellow: hsl(47, 88%, 63%);
  --clr-gray-950: hsl(0, 0%, 7%);
  --clr-gray-500: hsl(0, 0%, 42%);
  --clr-white: hsl(0, 0%, 100%);

  --spacing-24: 1.5rem;
  --spacing-16: 1rem;
  --spacing-12: 0.75rem;
  --spacing-4: 0.25rem;

  --fs-24: 1.5rem;
  --fs-20: 1.25rem;
  --fs-16: 1rem;
  --fs-14: 0.875rem;
  --fs-12: 0.75rem;
}
img {
  display: block;
  max-width: 100%;
}
body {
  font-family: "Figtree", sans-serif;
  font-size: var(--fs-16, 16px);
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--clr-yellow);
  color: var(--clr-gray-950);
}
.blog-card {
  border-radius: 20px;
  border: 1px solid var(--clr-gray-950, #111);
  background: var(--clr-white, #fff);
  box-shadow: 8px 8px 0px 0px #000;
  padding: var(--spacing-24, 24px);

  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);

  max-width: 384px;
}
.blog-image {
  border-radius: 10px;
}
.blog-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--spacing-12, 12px);
}
.status {
  border-radius: 4px;
  background: var(--color-yellow, #f4d04e);
  padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
  color: var(--clr-gray-950, #111);
  font-weight: 800;
  line-height: 150%; /* 21px */
  font-size: var(--fs-sm);
}
.public-date {
  font-weight: 500;
  line-height: 150%; /* 21px */
  font-size: var(--fs-14, 14px);
}
.blog-title {
  font-size: var(--fs-24);
  font-weight: 800;
  line-height: 150%; /* 36px */
}
.blog-des {
  font-size: var(--fs-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  color: var(--clr-gray-500, #6b7280);
}
.blog-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-12, 12px);
  font-size: var(--fs-14, 14px);
  font-weight: 800;
  line-height: 150%; /* 21px */
}
.blog-title:hover {
  color: var(--clr-yellow, #f4d04e);
  transition: color 0.3s ease-in-out;
}
@media (width <= 768px) {
  .blog-title {
    font-size: var(--fs-20, 20px);
  }
  .status,
  .public-date {
    font-size: var(--fs-12, 12px);
  }
  .blog-des {
    font-size: var(--fs-14, 14px);
  }
  .blog-card {
    margin-inline: var(--spacing-24, 24px);
  }
}
@media (width <= 330px) {
  .blog-card {
    margin-inline: var(--spacing-16, 16px);
  }
}