@font-face {
  font-family: "figtree-semi-bold";
  src: url(../fonts/Figtree-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "figtree-extra-bold";
  src: url(../fonts/Figtree-ExtraBold.ttf) format("truetype");
}
body {
  background-color: var(--color-yellow);
}

:root {
  --color-yellow:#f4d04e;
  --color-grey-950:#111111;
  --color-grey-500:#6b6b6b;
  --color-white:#ffffff;
}

.blog-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.blog-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "image" "content";
  gap: var(--space-300);
  width: 20.4375rem;
  box-sizing: border-box;
  padding: var(--space-300);
}
@media (min-width: 23.5em) {
  .blog-card {
    width: 24rem;
  }
}
.blog-card__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}
.blog-card__center {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
}
.blog-card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-150);
}

:root {
  --space-50: 0.25em;
  --space-75: 0.375em;
  --space-100: 0.5em;
  --space-125: 0.625em;
  --space-150: 0.75em;
  --space-175: 0.875em;
  --space-200: 1em;
  --space-225: 1.125em;
  --space-250: 1.25em;
  --space-275: 1.375em;
  --space-300: 1.5em;
  --space-325: 1.625em;
  --space-350: 1.75em;
  --space-375: 1.875em;
  --space-400: 2em;
  --space-425: 2.125em;
  --space-450: 2.25em;
  --space-475: 2.375em;
  --space-500: 2.5em;
  --space-525: 2.625em;
  --space-550: 2.75em;
}

.preset {
  line-height: 150%;
  letter-spacing: 0rem;
}

.text-preset-1 {
  font-size: 1.25rem;
  font-family: "figtree-extra-bold";
}
@media (min-width: 23.5em) {
  .text-preset-1 {
    font-size: 1.5rem;
  }
}
.text-preset-2 {
  font-size: 0.875rem;
  font-family: "figtree-semi-bold";
}
@media (min-width: 23.5em) {
  .text-preset-2 {
    font-size: 1rem;
  }
}
.text-preset-3 {
  font-size: 0.75rem;
  font-family: "figtree-semi-bold";
}
@media (min-width: 23.5em) {
  .text-preset-3 {
    font-size: 0.875rem;
  }
}
.text-preset-3-bold {
  font-size: 0.75rem;
  font-family: "figtree-extra-bold";
}
@media (min-width: 23.5em) {
  .text-preset-3-bold {
    font-size: 0.875rem;
  }
}
.text-preset-3-bold-2 {
  font-size: 0.875rem;
  font-family: "figtree-extra-bold";
}

.blog-card {
  background-color: var(--color-white);
  border: solid 0.0625rem;
  border-radius: var(--space-250);
  border-color: var(--color-grey-950);
  box-shadow: var(--space-100) var(--space-100) 0em 0em;
}
.blog-card__image {
  grid-area: image;
  background-image: url(../images/illustration-article.svg);
  background-position: center;
  width: 100%;
  height: 12.5rem;
  background-size: auto;
  border-radius: var(--space-125);
  image-rendering: pixelated;
}
.blog-card__category {
  display: inline-flex;
  width: 3.0625rem;
  height: 1.125rem;
  background-color: var(--color-yellow);
  padding: var(--space-50) var(--space-150);
  border-radius: var(--space-50);
  color: var(--color-dark-grey);
}
@media (min-width: 23.5em) {
  .blog-card__category {
    width: 3.625rem;
    height: 1.3125rem;
  }
}
.blog-card__date {
  color: var(--color-grey-950);
}
.blog-card__title {
  color: var(--color-grey-950);
}
.blog-card__title:hover {
  color: var(--color-yellow);
  cursor: pointer;
}
.blog-card__text {
  color: var(--color-grey-500);
}
.blog-card__avatar {
  width: 2rem;
}
.blog-card__author {
  color: var(--color-grey-950);
}

/*# sourceMappingURL=style.css.map */