/* =============================
  Pagination container
============================= */
.isotope-pager {
  display: flex;
  justify-content: center;
}

.isotope-pager .pagination {
  gap: 0.35rem;
}

/* Base page items */
.isotope-pager .page-item .page-link {
  border-radius: 8px;
  border: 1px solid var(--bs-border-color-translucent);
  color: #1e202f; /* $grisfonce */
  min-width: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Hover state */
.isotope-pager .page-item .page-link:hover {
  transform: translateY(-1px);
}

/* remove bottom margins of list */
.isotope-pager ul, .isotope-pager .pagination li {
  margin-bottom: 0;
}

/* =============================
  Populars
============================= */
.populars-container {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

/* =============================
Cards style
============================= */
.card-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;

  border-radius: 8px;
  border: 1px solid var(--e-insp-Gray, #D7D8DE);
  background: var(--e-insp-White, #FFF);
  width: 31%;
  min-height: 400px;
  min-width: 240px;
  margin: 0 16px 24px 0;
  /* for borders top of card-media */
  overflow: hidden;
}

.card-container .card-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  overflow: hidden;
}

.card-container .card-media .emptySquare {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.card-container .card-media img {
  /* hauteur de la vignette */
  max-height: 180px;
  /* aspect-ratio: 229/159; */
}

.card-container .card-content {
  display: flex;
  padding: 20px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  padding-bottom: 0;
}

.card-container .card-content h6 {
  color: var(--e-insp-Black-1, #1E202F);
  /* e-inspé/h6 */
  font-size: 18px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 22px !important; /* 122.222% */
  margin-bottom: 0 !important;
}

/* link "Decouvrir la formation" */
.card-container footer {
  padding: 0 0 20px 16px;
}


/* =============================
   Media queries
============================= */
.card-container {
   @media (max-width: 900px) {
      width: 48%;
      margin-right: 4%;
    }

    @media (max-width: 600px) {
      width: 100%;
      margin-right: 0;
    }
}