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

// thumbnails global
section{
  & > div:not(.__slide){
    article.thumbnails.programme{
      @include shadow;
    }
  }
}

.thumbnails{
  width: 100%;
  height: auto;
  background: white;
  margin: $gutter1;
  &:not(.bibliographie):not(.programme){
    @include shadow;
  }
  figure{
    height: 150px;
    margin: 0;
  }
  .__wrap{
    padding: 1rem;
    & > .d-flex{
      margin-bottom: 0.5rem;
    }
  }

  // thumbnails publications
  &.publications{
    @media screen and (min-width: 768px) {
      width: calc(100% / 2 - #{$gutter1} * 2);
    }
    @media screen and (min-width: 992px) {
      width: calc(100% / 3 - #{$gutter1} * 2);
    }
    @media screen and (min-width: 1200px) {
      width: calc(100% / 4 - #{$gutter1} * 2);
    }
    .__media{
      padding: 0.5rem 0 0.5rem 0.5rem;
    }
    .__wrap{
      padding: 0.5rem;
    }
  }

  &.bibliographie{
    background: white!important;
    padding: 0.5rem;
    &.link_ext{
      @include shadow;
    }
    @media screen and (min-width: 768px) {
      width: calc(100% / 2 - #{$gutter1} * 2);
    }
    @media screen and (min-width: 992px) {
      width: calc(100% / 3 - #{$gutter1} * 2);
    }
    @media screen and (min-width: 1200px) {
      width: calc(100% / 4 - #{$gutter1} * 2);
    }
    & > div  * {
      color: $col_black;
      &.__auteur *{
        font-size: 1.4rem;
      }
      &.__body{
        margin:1rem 0;
      }
    }
    a{
      text-decoration: underline;
      color: $color1;
    }
  }
}

// thumbnails slides
.__slide{
  .thumbnails{
    // max-width: 380px;
    width: calc(100% - 30px);
    a{
      width: calc(100%);
    }
    @media screen and (min-width: 768px) {
      width: calc(100% / 2 - #{$gutter1} * 2);
    }
    @media screen and (min-width: 992px) {
      width: calc(100% / 3 - #{$gutter1} * 2);
    }
    @media screen and (min-width: 1200px) {
      width: calc(100% / 4 - #{$gutter1} * 2);
    }
  }
}

// Page programme
.container{
  &.programme{
    .thumbnails{
      @media screen and (min-width: 768px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
        margin: 0.5rem;
      }
      @media screen and (min-width: 992px) {
        width: calc(100% / 3 - #{$gutter1} * 2);
      }
      // @media screen and (min-width: 1200px) {
      //   width: calc(100% / 4 - #{$gutter1} * 2);
      // }
    }
  }
}
// page moment
.__ressources{
  .__publications{
    .publications{
      // margin: $gutter1;

      .__media{
        padding: 0.5rem 0 0.5rem 0.5rem;
      }
      .__wrap{
        padding: 0.5rem;
      }
      @media screen and (min-width: 768px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
      }
      @media screen and (min-width: 992px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
      }
      @media screen and (min-width: 1200px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
      }
    }
  }
  .__bibliographie{
    .thumbnails{
      background: transparent;
      a{
        & > div{
          div, span, p{
            display: inline;
            background: white;
          }
        }
      }
      @media screen and (min-width: 768px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
      }
      @media screen and (min-width: 992px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
      }
      @media screen and (min-width: 1200px) {
        width: calc(100% / 2 - #{$gutter1} * 2);
      }

    }
  }
}
// thumbnails participant
.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;
          }
      }
    }
  }
}