:root {
  --carousel-cases-page-items: 2.75;
  --carousel-cases-page-items: 2.25;
  --carousel-cases-column-gap: 45px;
  --carousel-cases-row-gap: 0;
  --carousel-cases-column-gap-half: calc(var(--carousel-cases-column-gap) / 2);
}
section.carousel-cases {
  position: relative;
  overflow: hidden;
}
section.carousel-cases .section-bkgd {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -100;
  background-color: var(--color-grey-lighter);
}
section.carousel-cases .section-content {
  /* width: var(--content-width); */
  width: min(100%, var(--content-width));  
  margin: 0 auto;
  padding: 70px 0 85px 0;
}
section.carousel-cases .section-content-heading {
  margin-bottom: 0;
}
section.carousel-cases .section-content-text {
  margin-top: 15px;
}
section.carousel-cases .carousel {
  margin-top: 10px; /* Cases carousel only, for layout-specific spacing */
}
section.carousel-cases .carousel-inner {
  overflow: visible;
}
section.carousel-cases .carousel-scroll-container {
  overflow: hidden;
  overflow-x: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Chrome, Safari */
  /* scroll-behavior: smooth; /* Only set/unset this programmatically during the pagination functions to get smooth scrolls. Otherwise, a more crisp scroll behavior is preferred touch/wheel scrolling */
  scroll-snap-type: x mandatory;
  /* scroll-padding-left: 15px; */
  margin: 30px 0 0 0;
  padding: 0;

  /* .fix-3 */
  position: relative;
  left: calc(-1 * var(--carousel-cases-column-gap-half)); /* NOTE: This value should equal the left/right padding of .carousel-grid-item which itself should be half of the original gap value */
  width: calc(100% + (var(--carousel-cases-column-gap-half) * 2));
  scroll-padding: 0 0 0 calc(var(--carousel-cases-column-gap-half));
  margin: 0;
}
section.carousel-cases .carousel-scroll-container::-webkit-scrollbar { 
  display: none;  /* Chrome and Safari older versions */
}

section.carousel-cases .carousel-grid-item:first-of-type {
  margin-left: var(--carousel-cases-column-gap-half);
}
section.carousel-cases .carousel-grid-item:last-of-type {
  margin-right: var(--carousel-cases-column-gap-half);
}

@media only screen and (max-width: 1024px) {
  :root {
    --carousel-cases-page-items: 2.25;
  }
}

@media only screen and (max-width: 990px) {
}

@media only screen and (max-width: 880px) {
}

@media only screen and (max-width: 786px) {
}

@media only screen and (max-width: 660px) {
  :root {
    --carousel-cases-page-items: 1;
  }  
}