/* BLOG POSTS RECENTS PAR CATEGORIE */

/*************** 0. GLOBAL ***************/
.categorie_name {
  font-size: 1.5rem;
  font-weight: 500;
  color: #d10565;
  padding-top: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.post-item_marches-fi {
  grid-area: post-item_marches-fi;
}
.post-item_assurance {
  grid-area: post-item_assurance;
}
.post-item_idd {
  grid-area: post-item_idd;
}
.post-item_formation {
  grid-area: post-item_formation;
}
.post-item_finance {
  grid-area: post-item_finance;
}
.post-item_economie {
  grid-area: post-item_economie;
}

.canevas_articles_recents {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  width: 100%;
  padding-left: 5rem;
  padding-right: 5rem;
  grid-template-areas:
    'post-item_marches-fi'
    'post-item_assurance'
    'post-item_idd'
    'post-item_formation'
    'post-item_finance'
    'post-item_economie';
}

@media screen and (min-width: 900px) {
  .canevas_articles_recents {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      'post-item_marches-fi post-item_assurance'
      'post-item_idd post-item_formation'
      'post-item_finance post-item_economie';
  }
}

@media screen and (min-width: 1000px) {
  .canevas_articles_recents {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-areas:
      'post-item_marches-fi post-item_marches-fi post-item_marches-fi post-item_assurance'
      'post-item_idd post-item_formation post-item__economie post-item__economie'
      'post-item_finance post-item_finance post-item_economie post-item_economie';
  }
  .title_articles_recents {
    display: flex;
    justify-content: center;
    color: rgba(8, 75, 132, 1);
    padding-bottom: 4rem;
    letter-spacing: 2rem;
    font-weight: 600;
    font-size: 2rem;
    width: 100%;
    margin-top: 7rem;
  }
}

/*************** 1. MARCHE FINANCIER ***************/
.post-img_marche-fi {
  width: 60vw;
  border-radius: 2rem;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.post-item_marches-f {
  width: 60vw;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.post-img {
  width: 30vw;
  height: 10rem;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

#blog-content-list {
  display: flex;
  width: max-content;
}
.post_title {
  font-size: 2rem;
  font-weight: 500;
  color: rgba(8, 75, 132, 1);
  padding-top: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.btn_post {
  display: flex;
  justify-content: center;
  background-color: rgba(8, 75, 132, 1);
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 20rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 4rem;
  border-radius: 1rem;
}

/*************** 1. MARCHE FINANCIER ***************/
.post-img_assurance {
  width: 30vw;
}
.post-item_marches-f {
  width: 60vw;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.post-img {
  width: 30vw;
  height: 10rem;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

#blog-content-list {
  display: flex;
  width: max-content;
}
.post_title {
  font-size: 2rem;
  font-weight: 500;
  color: rgba(8, 75, 132, 1);
  padding-top: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.btn_post {
  display: flex;
  justify-content: center;
  background-color: rgba(8, 75, 132, 1);
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 20rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 4rem;
  border-radius: 1rem;
}

#nav-below {
  display: none;
}

.enlireplus {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
}
.enlireplus_button {
  display: flex;
  justify-content: center;
  background-color: #d10565;
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 20rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 4rem;
  border-radius: 1rem;
}
.enlireplus_button:hover {
  background-color: #d10565;
  opacity: 0.8;
  color: white;
}