body {
  margin: 0;
  background: #000;
  color: #fff;
  /*font-family: Arial, sans-serif;*/
}

h2 {
  text-align: center;
  margin: 20px 0;
  font-size: 2rem;
}

.slider {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 20px;
}
.slider::-webkit-scrollbar {
  display: none;
}

/* 2-row grid */
.slide-track {
  display: grid;
  grid-template-rows: 200px 200px; /* two rows */
  grid-auto-flow: column;
  gap: 16px;
}

/* Slide styles */
.slide {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* ✅ grayscale effect */
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.slide:hover img {
  filter: grayscale(0%);      /* show color */
  transform: scale(1.05);     /* slight zoom */
}

.slider-head {
  background-color: #161815;
  padding-top: 40px;
  padding-bottom: 80px;
}

.slider-head h2 {
  color: white;
  padding-top : 40px;
  padding-bottom : 40px;
}

/* Exact sizes */
.slide.tall { width: 400px; grid-row: span 2; }   /* tall spanning both rows */
.slide.wide { width: 340px; }                     /* wide single row */
.slide.small { width: 180px; }                    /* small single row */

/* Responsive adjustments */
@media (max-width: 1024px) {
  .slide-track { grid-template-rows: 200px 200px; }
  .slide.tall { width: 400px; }
  .slide.wide { width: 280px; }
  .slide.small { width: 140px; }
}

@media (max-width: 768px) {
  .slide-track { grid-template-rows: 160px 160px; }
  .slide.tall { width: 300px; }
  .slide.wide { width: 220px; }
  .slide.small { width: 110px; }
}

@media (max-width: 480px) {
  .slide-track { grid-template-rows: 120px 120px; }
  .slide.tall { width: 240px; }
  .slide.wide { width: 160px; }
  .slide.small { width: 80px; }
}