.article-preview h2,
.article-preview a{
  text-decoration: none;
  font-family: "Funnel Sans";
  font-weight: 600;
  color: #141414;
}

.article-preview a:hover{
  text-decoration: underline;
}

.main-content{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px 30px;
}

.articles-grid{
  display: grid;
  grid-template-areas:
    "grand-article grand-article petit-1"
    "grand-article grand-article petit-2"
    "petit-3 petit-4 petit-5";
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

.article-1{
  grid-area: grand-article;
}

.article-2{
  grid-area: petit-1;
}

.article-3{
  grid-area: petit-2;
}

.article-4{
  grid-area: petit-3;
}

.article-5{
  grid-area: petit-4;
}

.article-6{
  grid-area: petit-5;
}

.article-preview {
  overflow: hidden;
  height: 100%;
}

.preview-image {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 750px){
  .articles-grid{
    display: grid;
    grid-template-areas:
      "grand-article grand-article"
      "grand-article grand-article"
      "petit-1 petit-2"
      "petit-3 petit-4"
      "petit-5 petit-5";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
  }

  .article-1{
    grid-area: grand-article;
  }

  .article-2{
    grid-area: petit-1;
  }

  .article-3{
    grid-area: petit-2;
  }

  .article-4{
    grid-area: petit-3;
  }

  .article-5{
    grid-area: petit-4;
  }

  .article-6{
    grid-area: petit-5;
  }
}