@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/static/Figtree-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
--Yellow:   hsl(47, 88%, 63%);
--Gray-950: hsl(0, 0%, 7%);
--Gray-500: hsl(0, 0%, 42%);
--White:    hsl(0, 0%, 100%);

--space-200: 1.5rem;   /* 24px */
--space-150: 0.75rem; /* 12px */
--space-100: 0.5rem;  /* 8px */
--space-50: 0.25rem;  /* 4px */
}

body{
    font-family: 'Figtree', sans-serif;
    background-color: var(--Yellow);
    box-sizing: border-box;
    /* width: fit-content;
    height: fit-content; */
    
}

.text-preset-1 {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 150%;
  letter-spacing: 0;
}

/* Text Preset 2 */
.text-preset-2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  letter-spacing: 0;
}

/* Text Preset 3 */
.text-preset-3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 150%;
  letter-spacing: 0;
}

/* Text Preset 3 (Bold) */
.text-preset-3-bold {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 150%;
  letter-spacing: 0;
}

.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-200);
  /* background-color: var(--Yellow); */
}

.blog-card{
  display: flex;
  flex-direction: column;
  padding-inline: var(--space-200);
  padding-block: var(--space-200);
  margin-block: var(--space-200);
  gap: var(--space-200);
  background-color: var(--White);
  border-color: var(--Gray-950);
  border-width: 1px;
  border-style: solid;
  width:clamp(20rem,50%,23rem);
  height: fit-content;
  border-radius: 20px;
  stroke: var(--Gray-950);
  box-shadow:  0.5rem 0.5rem 0 0 black;
}

.blog-card-image img{
  border-radius: 10px;
  width: 100%;
}
.blog-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-150);
  /* inline-size: 100%; */
  justify-content: center;
  height: fit-content;
  padding-inline: 0px;
  padding-block: 0px;
}

.category{
  background-color: var(--Yellow);
  text-align: center;
  padding-inline: 0.75rem;
  padding-block: 0.24rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: var(--Gray-950);
  width: fit-content;
  height: fit-content;
}

.publish-date{
  font-size: 0.75rem;
  color: var(--Gray-950);
  width: 233px;
  height: fit-content;
}

.description{
  color: var(--Gray-500);
  text-align: left;
}
.blog-author{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0px;
  padding-block: 0px;
  width: fit-content;
  height: fit-content;
}
.avatar img{
 width: 32px;
 height: 32px;
} 

.name{
  width: fit-content;
  height: fit-content;
}

.title:hover{
  color: var(--Yellow);
  cursor: pointer;
}

/* @media (min-width: 768px) { 
  .blog-card {
    width: 354px;
  }
}

@media (min-width: 1440px){
  .blog-card {
    width: 384px;
  }
} */