.container {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.content {
  background-color: #f1f1f1;
  padding: 5px;
  min-height: 100px;
  max-width: 1400px;
  margin: 0 auto;
}

.content ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.content ol li {
  flex: 0 0 calc(25% - 8px); /* Réglez la largeur de chaque colonne à 25% avec un espacement de 8px entre les colonnes */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2px;
}

@media screen and (min-width: 768px) {
  .content ol li {
    flex: 0 0 calc(25% - 8px); /* Pour les écrans plus grands, ajustez la largeur à 25% */
  }
}

.content ol li div {
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #dddfe2;
  -webkit-box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.15);
  background-color: #FFF;
  border-radius: 5px;
  font-family: 'Montserrat';
}

.content ol li span {
  color: #90949c;
  padding-left: 55px;
  position: relative;
  height: 50px;
  display: block;
  font-size: 11px;
  border-bottom: solid 1px #eaeaea;
  margin-bottom: 20px;
}

.content ol li span img {
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  border: solid 1px #d7d7d7;
  height: 40px;
}

.content ol li span a {
  color: #365899;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  width: 100%;
  display: block;
  padding-top: 0px;
  padding-bottom: 2px;
}

.content ol li span a:hover {
  text-decoration: underline;
  color: red;
}

.content ol li img.picture {
  width: 100%;
  clear: both;
}

.content ol li h3 {
  font-size: 14px;
  margin-top: 25px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 15px;
  margin-top: 0;
}

.content ol li h3 a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.content ol li h3 a:hover {
  text-decoration: underline;
  color: red;
}

.content ol li:hover h3 a {
  color: #1a64f3;
}


@media screen and (min-width: 1000px) {
  .content ol li {
    flex: 0 0 calc(33.33% - 8px); /* Trois colonnes sur les écrans d'au moins 1000px de large */
  }
}

@media screen and (max-width: 999px) and (min-width: 801px) {
  .content ol li {
    flex: 0 0 calc(50% - 8px); /* Deux colonnes sur les écrans entre 801px et 999px de large */
  }
}

@media screen and (max-width: 800px) {
  .content ol li {
    flex: 0 0 calc(100% - 8px); /* Une colonne sur les écrans de 800px ou moins */
  }


/*
@media screen and (max-width: 685px) {
  .content ol li {
    width: calc(50%);
  }
}

@media screen and (max-width: 455px) {
  .content ol li {
    width: calc(100%);
  }
}
*/