Popsu-coloque/web/themes/custom/popsu_colloque/css/components/thumbnails/thumbnails.scss

 .thumbnails{
   margin: 1rem 0rem;
   // max-width: 300px;
   min-width: 250px;
   height: auto;
   width: calc(100% / 4 );
   background: white;
   transform: scale(1);
   @include shadow;
   a{
     display: block;
     height: 100%;
   }
   .__content{
     margin-top: 1rem;
   }
  .d-flex{
     // padding: 1rem;
   }
   &.programme{
     .__wrap{
       padding: 1rem;
     }
   }
   &.publications{
     width: 100%;
     .__media{
       padding: 1rem;
       figure{
         height: 100%;
         img{
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
       }
     }
     .__content{
       margin: 1rem 1rem 1rem 0;
     }
   }
 }

 .thumbnails{
   figure{
     height: 120px;
     margin: 0;
     img{
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
   }
 }

.programme{
  .row{
    margin: 0;
  }
  .thumbnails{
    width: 100%;
    margin: 0;
    figure{
      height: 250px;
    }
  }
}


@media screen and (min-width: 768px) {
  .thumbnails{
    &.publications{
      width: calc(100% / 2 - #{$gutter1} * 2);
    }
  }
}
@media screen and (min-width: 992px) {
  .programme{
    .row{
      margin: $gutter1 calc(-#{$gutter1});
    }
    .thumbnails{
      width: calc( 50% - #{$gutter1} * 2);
      margin: 0 $gutter1;
      figure{
        height: 250px;
      }
    }
  }
  .thumbnails{
    &.publications{
      width: calc(100% / 4 - #{$gutter1} * 4);
    }
  }
}

.thumbnails_participants{
  figure{
    & > div{
      width: 100px;
      height: 100px;
      margin-left: 0.5rem;

      img{
        border-radius: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    figcaption{
      &.__info{
          padding: 4rem 0.5rem 0.5rem 0.5rem;
          margin-top: -3rem;
          background: white;
          .__name{
            text-transform: uppercase;
          }
          .__qualite{

          }
      }
    }
  }
}

article{
  .__publications{
    & > div{
      article{
        width: 100%;
        @include shadow;
        figure{
          padding: 1rem;
          .__media{
            margin-right: 1rem;
          }
          figcaption {
            width: 80%;
          }
        }
      }
    }
  }
  .__bibliographie{
    & > div{
      article{
        width: 100%;
        a{
          & > div {
            p, span, div{
              display: inline;
              background: white;
            }
          }
        }
      }
    }
  }
}

.container {
  &.publications{
    section{
      article{
        width: 100%;
        @include shadow;
        figure{
          padding: 1rem;
          .__media{
            margin-right: 1rem;
          }
          figcaption {
            width: 80%;
          }
        }
      }
    }
  }
  &.bilbiographie{
    article{
      width: 100%;
      a{
        & > div {
          p, span, div{
            display: inline;
            background: white;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 992px) {
  article{
    .__publications{
      & > div{
        margin: 0 calc(-#{$gutter1});
        article{
          width: calc( 50% - #{$gutter1} * 2);
          margin: 0 $gutter1;
          @include shadow;
          figure{
            padding: 1rem;
            .__media{
              margin-right: 1rem;
            }
            figcaption {
              width: 80%;
            }
          }
        }
      }
    }
    .__bibliographie{
      & > div{
        margin: 0 calc(-#{$gutter1});
        article{
          width: calc( 100% / 3 - #{$gutter1} * 3);
          margin: 0 $gutter1;
          figure{
            padding: 1rem;
            .__media{
              margin-right: 1rem;
            }
            figcaption {
              width: 80%;
            }
          }
        }
      }
    }
  }

  .container {
    &.publications{
      section{
        article{
          width: calc( 50% - #{$gutter1} * 2);
          margin: 0 $gutter1;
          @include shadow;
          figure{
            padding: 1rem;
            .__media{
              margin-right: 1rem;
            }
            figcaption {
              width: 80%;
            }
          }
        }
      }
      .views{
        &.__publications{
          article{
            width: calc( 25% - #{$gutter1} * 4);
          }
        }
      }
    }
    &.bibliographie{
      article{
        width: calc( 100% / 3 - #{$gutter1} * 3);
        margin: 0 $gutter1;
        figure{
          padding: 1rem;
          .__media{
            margin-right: 1rem;
          }
          figcaption {
            width: 80%;
          }
        }
      }
    }
  }
}