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

/**
 * @file
 * Presentational styles for Drupal stark theme layout.
 *
 * It is left empty for testing purposes.
 *
 * @see https://www.drupal.org/project/drupal/issues/2349711
 */

 .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%;
   }
    & > .__wrap{
       padding: 1rem;
   }
   .__media{
     margin-right: 1rem;
     figure{
       height: 100%;
       img{
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
   }
  .d-flex{
     padding: 1rem;
   }
 }

 .thumbnails{
   figure{
     height: 100px;
     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: 992px) {
  .programme{
    .row{
      margin: $gutter1 calc(-#{$gutter1});
    }
    .thumbnails{
      width: calc( 50% - #{$gutter1} * 2);
      margin: 0 $gutter1;
      figure{
        height: 250px;
      }
    }
  }
}


article{
  .__publications{
    & > div{
      article{
        width: 100%;
        @include shadow;
        figure{
          padding: 1rem;
          .__media{
            margin-right: 1rem;
          }
          figcaption {
            width: 80%;
          }
        }
      }
    }
  }
}

@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%;
            }
          }
        }
      }
    }
  }
}