.slider {
  display:grid;
  gap:1rem;
  margin:1rem 0;
}
.slider:first-child { margin-top:0; }
.slider.slider-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
.slider.slider-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.slider.slider-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.slider.slider-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.slider .slide {
  position:relative;
  background:#f5f5f5;
  transition-duration:200ms;
}
.slider .slide:hover {
  background:#cccccc;
  color:#333333;
}
.slider .slide img {
  width:100%;
  height:auto;
}
.slider .slide .description {
  text-align:center;
  padding:.8rem;
}
.slider .slide .description .bold {
  text-transform:uppercase;
  font-weight:bold;
}
@media only screen and (max-width: 1024px) {
  .slider.slider-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 768px) {
  .slider.slider-3 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .slider .slide img.desktop-image { display:none; }
}
@media only screen and (max-width: 600px) {
  .slider.slider-2 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .slider.slider-4 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
}
@media only screen and (min-width: 769px) {
  .slider .slide img.mobile-image { display:none; }
}