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

// thumbnails global
section {
  article.thumbnails.programme {
    .__content {
      span {
        color: $color2;
        font-size: 0.8rem;
        font-family: "truenoregular_italic";
        text-transform: none !important;
        strong {
          font-family: "truenobold_italic";
        }
      }
    }
  }
  & > 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;
      .__img {
        width: 100px;
      }
    }
    .__wrap {
      padding: 0.5rem;
    }
    & > div {
      height: 100%;
    }
    div > * {
      color: $color2;
    }
    a {
      display: block;
      height: 100%;
    }
  }

  &.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;
    }
  }
  &.interviews {
    @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;
      max-width: 50%;
      .__img {
        width: 100px;
      }
    }
    .__wrap {
      padding: 0.5rem;
    }
    & > div {
      height: 100%;
    }
    div > * {
      color: $color2;
    }
    a {
      display: block;
      height: 100%;
    }
  }
}

// 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);
      }
    }
  }
  .__interviews {
    .interviews {
      // 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);
      }
    }
  }
}
// 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;
        }
      }
    }
  }
}