/* ==========================================================
   case-studies.css — Case Studies page ONLY
   ==========================================================

   Section: Image strip  (list.jpg)
   · Full-width section, red background fills entire bottom half
   · 4 images displayed in a row with thin white gaps
   · Images sit ON the red bar, overlapping white/red boundary
   ========================================================== */

/* 
   The strip is a 2-part layout:
   top = white bg (where image tops sit)
   bottom = red bg (where image bottoms sit)
   Done with a gradient background on the wrapper
*/
.cs-strip-section {
  background: linear-gradient(
    to bottom,
    var(--white) 35%,
    var(--red)   35%
  );
  padding-block: 0 0;
  overflow: hidden;
}
.cs-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-inline: var(--px);
}
.cs-strip-item {
  overflow: hidden;
}
.cs-strip-item img {
  width: 100%;
  aspect-ratio: 256 / 330;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width:760px){

  .cs-strip-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .cs-strip-grid::-webkit-scrollbar{
    display:none;
  }

  .cs-strip-item{
    flex:0 0 auto;
    width:140px;
  }

}