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);
   box-shadow: none;
   transition: 0.3s transform ease, 0.3s box-shadow ease;
   a{
     display: block;
     height: 100%;
   }
   &:hover{
     transform: scale(1.05);
     transition: 0.3s all ease;
     box-shadow: 0px 0px 13px 0px $color2;
   }
    & > .__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: 960px) {
  .programme{
    .row{
      margin: $gutter1 calc(-#{$gutter1});
    }
    .thumbnails{
      width: calc( 50% - #{$gutter1} * 2);
      margin: 0 $gutter1;
      figure{
        height: 250px;
      }
    }
  }
}