@import url('utilServices.css');

main{
    color: var(--mainTextColor);
    font-size: 1.2rem;
    padding: 1rem clamp(1rem, 10vw, 300px);
    line-height: 2rem;
    font-family: var(--defaultFont);
    overflow: hidden;

}

a:hover{
  color: var(--white);
}

.articles{
  position: relative;
  background: var(--darkColor);
  padding: 1rem clamp(1rem, 10vw, 300px);
}

.articles h2{
  color: var(--white) !important;
}

.title-container{
  margin-bottom: 1rem;
}

.articles > div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.articles article{
  height: 300px;
  width: clamp(200px, 20vw, 400px);
  border: 2px solid var(--lightColor);
  border-radius: var(--border3);
  transition: 300ms;
  cursor: pointer;
}

.articles article:hover{
  scale: 1.05;
  
}

.articles article > img{
  width: 100%;
  height: 40%;
  border: 2px solid var(--lightColor);
  border-radius: 0.6rem 0.6rem 0 0;
}

.articles article > .article-content{
  padding: clamp(0.7rem, 1vw, 3rem);
}

article > .article-content > .article-header{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.article-header img{
  border-radius: 99px;
  width: 40px;
  height: 40px;
}


.article-header > div{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.article-content h3{
  color: var(--secondaryColor);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;

}

.article-content > p{
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;

}


/* RESPONSIVITY */
/* ============ TABLETS ============ */
@media screen and (max-width: 1150px){
  .articles > div{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .articles article{
    width: 25vw;
  }
}

/* ============ MIDDLE ============ */
@media screen and (max-width: 778px){
  .articles > div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .articles article{
    width: 40vw;
  }

}
/* ============ SMALL TABLETS / SMARTPHONES ============ */
@media screen and (max-width: 578px){
  .articles h2{
    white-space: normal;
  }
  .articles > div{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .articles article{
    width: 80vw;
  }
}