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

// thumbnails global
section{
  & > div:not(.__slide){
    article.thumbnails.programme{
      a{
        display: block;
        width: 100%;
        height: 100%;
        background: white;
        @include shadow;
      }
    }
  }
}

.thumbnails{
  width: 100%;
  height: auto;
  background: white;
  margin: calc(#{$gutter}) 0;
  @media screen and (min-width: 768px) {
    margin: calc(#{$gutter});
  }
  &:not(.bibliographie):not(.programme){
    @include shadow;
  }
  figure{
    height: 150px;
    margin: 0;
  }
  .__wrap{
    padding: 1rem;
    time, .type_moment{
      font-family: 'truenoregular';
      font-size: 0.8rem;
      text-transform: uppercase;
    }
    & > .d-flex{
      margin-bottom: 0.5rem;
    }
  }

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

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

// Page programme
.container{
  &.programme{
    .thumbnails{
      @media screen and (min-width: 768px) {
        width: calc(100% / 2 - #{$gutter} * 2);
        margin: 0.5rem;
      }
      @media screen and (min-width: 992px) {
        width: calc(100% / 3 - #{$gutter} * 2);
      }
      .inter{
        margin-top: 0.5rem;
        span{
          color: $color2;
          font-size: 0.8rem;
          font-family: 'truenoregular_italic';
          text-transform: none!important;
          strong{
          font-family: 'truenobold_italic';
          }
        }
      }
    }
  }
}
// page moment
.__ressources{
  .__publications{
    .publications{
      // margin: $gutter;
      .__media{
        padding: 0.5rem 0 0.5rem 0.5rem;
      }
      .__wrap{
        padding: 0.5rem;
      }
      @media screen and (min-width: 768px) {
        width: calc(100% / 2 - #{$gutter} * 2);
      }
      @media screen and (min-width: 992px) {
        width: calc(100% / 2 - #{$gutter} * 2);
      }
      @media screen and (min-width: 1200px) {
        width: calc(100% / 2 - #{$gutter} * 2);
      }
    }
  }
  .__bibliographie{
    .thumbnails{
      background: transparent;
      a{
        & > div{
          div, span, p{
            display: inline;
            background: white;
          }
        }
      }
      @media screen and (min-width: 768px) {
        width: calc(100% / 2 - #{$gutter} * 2);
      }
      @media screen and (min-width: 992px) {
        width: calc(100% / 2 - #{$gutter} * 2);
      }
      @media screen and (min-width: 1200px) {
        width: calc(100% / 2 - #{$gutter} * 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;
          }
      }
    }
  }
}