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


/* || RESET */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* || VARIABLES */
:root {
  /* COLORS */
  --yellow : #F4D04E;
  --gray-950: #111111;
  --gray-500: #6B6B6B;
  --white: #FFFFFF;

  /* TYPOGRAPHY */
  --FF: Figtree, serif;

  /*DESKTOP*/
  --text-preset-1: 800 1.5rem/150% var(--FF);
  --text-preset-2: 500 1rem/150% var(--FF);
  --text-preset-3: 500 0.88rem/150% var(--FF);
  --text-preset-3-bold: 800 0.88rem/150% var(--FF);
  

   /*MOBILE */
   --TEXT-PRESET-3-MOB-BOLD: 800 0.75rem/150% var(--FF);
   --TEXT-PRESET-3-MOB: 500 0.75rem/150% var(--FF);
   --TEXT-PRESET-1-MOB: 800 1.5rem/150% var(--FF);
   --TEXT-PRESET-2-MOB: 500 0.88rem/150% var(--FF);


    /*SHADOWS*/
    --shadow: 8px 8px 0px 0px #000;
}

/* || UTILITY CLASSES */
.offscreen {
  position: absolute;
  left: -10000px;
}

.nowrap {
  white-space: nowrap;
}

.center {
  text-align: center;
}

.responsive-image {
  display: none;
}

/* MOBILE FIRST DESIGN */
/* || GENERAL STYLES */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--yellow);
  display: grid;
  place-content: center;
}

h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
}

a:any-link {
  text-decoration: none;

}

/* || BLOG CARD*/
.blog-card{
  max-width: 327px;
  min-height: 501px;
  background-color: var(--white);
  display:flex;
  flex-flow: column;
  gap:1.5rem;
  border: 1px solid var(--gray-950);
  box-shadow: var(--shadow);
  border-radius: 20px;
  margin: 9.75rem 1.5rem;  
  padding:1.5rem;


}
/* || BLOG IMAGE CONTAINER*/
.blog-image{
  width: 279px;
  height: 200px;
  border-radius: 10px;
  overflow:hidden;  
}
/* || BLOG CONTAINER  IMAGE*/
.blog-image img{
 max-width: 336px;
 min-height: 201px;
 object-fit: cover; 
 align-items: center; 
}
/* || BLOG CARD CONTENT*/
 .content-container{
  display:flex;
  flex-flow: column;
  gap:0.75rem;
}
.category{
  width: 73px;
  height: 26px;
  border-radius: 4px;
  background-color: var(--yellow);
  padding: 0.25rem 0.75rem;
  color:var(--gray-950);
  font:var(--TEXT-PRESET-3-MOB-BOLD)
}
.publish-date{
  font: var(--TEXT-PRESET-3-MOB);
  color: var(--gray-950); 
}
.title{
  font: var(--TEXT-PRESET-1-MOB);
  color: var(--gray-950); 
}
.description{
  font: var(--TEXT-PRESET-2-MOB);
  color: var(--gray-500);
}
/* || BLOG CARD AUTHOR*/
.author{
  display: flex;
  align-items:center ;
  gap:0.75rem;
}
.avatar{
  width: 32px;
  height: 32px;
}
.avatar img{
 max-width:100%;
 height: 100%;
 object-fit: cover;
}
.author-name{
  font:var(--text-preset-3-bold);
  color: var(--gray-950);
 
}
/*Tablet*/
@media screen and (min-width:768px){
  .blog-card{
    max-width: 384px;
    min-height: 522px;
    margin: 13.69rem 33rem;    
  }
  /* || BLOG IMAGE CONTAINER*/
.blog-image{
  width: 336px;    
}
/* || BLOG CONTENT*/
.category{
  width: 79px;
  height: 29px; 
  font:var(--text-preset-3-bold);
}

.publish-date{
  font: var(--text-preset-3); 
}
.title{
  font:var(--text-preset-1);
 
}
.description{
  font: var(--text-preset-2);
}
   
}