body{scroll-behavior:smooth;}
section{padding-bottom:6.75rem;}
section .col-md-4{padding-top:5rem;max-width:24.375rem;margin-bottom:-4rem;}
section .thumbnail *{-webkit-transition:all 0.4s ease;transition:all 0.4s ease;}
section h4{padding:0.25rem 0;}
section .thumbnail.target{box-shadow:4px 4px 5px #d2d2d2,
5px 5px 5px #e2e2e2,
6px 6px 5px #e9e9e9,
7px 7px 5px #efefef,
8px 8px 5px #fafafa;}
a.thumbnail{
  display:block;
}
#products h2 {margin-top:1rem;padding-left:15px;}
.thumbnail{overflow:hidden;pointer-events:all;height: 100%;cursor:pointer;}
.thumbnail figure{position:relative;overflow:hidden;}
.svg{position:absolute;left: 0;right: 0;top:200%;bottom:0;margin:auto;opacity:0;width: 100%;height: 100%;background-color:rgba(50,50,50,0.8);}
.svg img{max-width:100%;height: 100%;}
.thumbnail h5{font-size: 125%;margin-top:0;}
@media (min-width: 768px) {
  .thumbnail:hover .svg{opacity:1;top:0;}
  .thumbnail:hover{border: 1px solid #ddd;box-shadow:4px 4px 5px #d2d2d2,
  5px 5px 5px #e2e2e2,
  6px 6px 5px #e9e9e9,
  7px 7px 5px #efefef,
  8px 8px 5px #fafafa;}
  .thumbnail:hover *{-webkit-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-transition-delay:0.2s;transition-delay:0.2s;}
}
@media (max-width: 767px) {
  #products h3{margin-top:2rem;margin-bottom:0;}
  section .col-md-4{padding-top:0;margin-bottom:0;margin-top:1rem;}
  .svg{display:none;}
  a.thumbnail{display: flex;min-height: 0;margin: 0;padding: 0;}
  a.thumbnail figure{width:120px;flex-shrink:0;}
  a.thumbnail figure + div,a.thumbnail figure + hgroup{width:calc(100% - 120px);text-align:left;padding-left:1rem;}
  section .col-md-4{width: 100%;}
  section h4,.thumbnail h5{font-size: 1rem;}
}