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

:root{
  --yellow: hsl(47, 88%, 63%);
  --white: hsl(0, 0%, 100%);
  --gray500: hsl(0, 0%, 42%);
  --gray950: hsl(0, 0%, 7%);
}

html{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: var(--yellow);
  font-family: "Figtree", serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--gray950)
}

.blog-preview-card{
  background-color: var(--white);
  max-width: 384px;
  max-height: 522px;
  padding: 24px;
  border: 1px solid var(--gray950);
  box-shadow: 10px 10px 0;
  border-radius: 20px;
}

.blog-image img{
  width: 100%;
  border-radius: 10px;
}

.blog-card-text div{
  margin-top: 1rem;
}

.tag{
  width: 58px;
  height: 21px;
  background-color: var(--yellow);
  padding: 4px 12px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 5px;
  color: var(--gray950);
}

.title{
  font-weight: 800;
  font-size: 22px;
  transition: 0.2s ease;
  color: var(--gray950);
  cursor: pointer;
}

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

.published-date{
  font-size: 15px;
}

.text{
  color: var(--gray500);
  line-height: 150%;
  font-size: 16px;
  font-weight: 450;
}

.author{
  display: flex;
  align-items: center;
  gap: 10px;
}

.author img{
  max-width: 32px;
  max-height: 32px;
  margin-top: 1rem;
}

.author p{
  font-weight: 800;
}