: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 {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: start;
  gap: 45px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style-type: none;

  /* .fix-3 */
  gap: 0 var(--carousel-cases-column-gap);
  padding: 35px 0; /* Prevent top/bottom of box-shadow on .carousel-grid-item from being clipped */
}
section.carousel-cases .carousel-grid-item {
  position: relative;
  width: calc((var(--content-width) - ((var(--carousel-cases-page-items) - 1) * var(--carousel-cases-column-gap))) / var(--carousel-cases-page-items));
  flex: 0 0 auto;
  padding: 31px 21px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 3px 10px 3px #75757526;
  scroll-snap-align: start;

  /* .fix-3 */
  margin: 0;
  padding: 0;
  background-color: unset;
  border-radius: unset;
  box-shadow: unset;
}
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);
}
section.carousel-cases .carousel-grid-item-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  outline: none;
  cursor: pointer;
}
section.carousel-cases .carousel-grid-item .carousel-grid-item-inner {
  position: relative;
  height: 100%;
  padding: 0 0 70px 0;

  /* .fix-3 */
  padding: 31px 21px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 3px 10px 3px #75757526;

  /* New zoom hover style */
  transform: scale(1);
  transition: transform 0.15s ease-out;
}
/* New zoom hover style */
section.carousel-cases .carousel-grid-item:hover .carousel-grid-item-inner {
  transform: scale(1.05);
}
section.carousel-cases .carousel-grid-item .carousel-grid-item-content {
  /* .fix-3 */
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0 70px 0;
  z-index: 1;
  pointer-events: none;
}
section.carousel-cases .carousel-grid-item .badge-active-lawsuit {
  position: absolute;
  top: 2px;
  right: 0;
  width: 110px;
  padding: 0;
}
section.carousel-cases .carousel-grid-item .case-title-img-link {
  text-decoration: none;
  pointer-events: auto;
}
section.carousel-cases .carousel-grid-item .case-title {
  display: block;
  width: calc(100% - 120px);
  text-decoration: none;

  min-height: 2.75em;
}
section.carousel-cases .carousel-grid-item .case-title:hover,
section.carousel-cases .carousel-grid-item .case-title:focus,
section.carousel-cases .carousel-grid-item .case-title:active {
  text-decoration: none;
}
/* Right chevron after title */
/*
section.carousel-cases .carousel-grid-item .case-title:after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 0 0 6px;
  /* background-image is set in module.html using HubL * /
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
*/
section.carousel-cases .carousel-grid-item h3 {
  display: inline;
  font-size: 1.25rem;
  font-weight: 700;
}
section.carousel-cases .carousel-grid-item figure {
  overflow: hidden;
  aspect-ratio: 1.4/1;
  margin: 26px 0 0 0;
  border-radius: 15px;
}
section.carousel-cases .carousel-grid-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.carousel-cases .carousel-grid-item .case-summary {
  margin-top: 18px;
}
section.carousel-cases .carousel-grid-item .case-summary p {
}
/* Read more link/button */
section.carousel-cases .carousel-grid-item a.case-button-link {
  display: inline-block;
  margin-top: 7px;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  pointer-events: auto;
}
section.carousel-cases .carousel-grid-item a.case-button-link:hover,
section.carousel-cases .carousel-grid-item a.case-button-link:focus,
section.carousel-cases .carousel-grid-item a.case-button-link:active {
  text-decoration: underline;
}
/* Call-to-action link/button */
section.carousel-cases .carousel-grid-item .button {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: auto;
}
/* Old dark gray hightlight hovery style */
section.carousel-cases .carousel-grid-item:hover,
section.carousel-cases .carousel-grid-item:has(:focus),
section.carousel-cases .carousel-grid-item:has(:active) {
  /*
  background-color: var(--color-grey-dark);
  color: #fff;
  */
}
section.carousel-cases .carousel-grid-item:hover .case-title:after,
section.carousel-cases .carousel-grid-item:has(:focus) .case-title:after,
section.carousel-cases .carousel-grid-item:has(:active) .case-title:after {
  /*
  filter: invert(100%);
  */
}
section.carousel-cases .carousel-grid-item:hover h3,
section.carousel-cases .carousel-grid-item:has(:focus) h3,
section.carousel-cases .carousel-grid-item:has(:active) h3,
section.carousel-cases .carousel-grid-item:hover .case-summary p,
section.carousel-cases .carousel-grid-item:has(:focus) .case-summary p,
section.carousel-cases .carousel-grid-item:has(:active) .case-summary p {
  /*
  color: #fff;
  */
}
section.carousel-cases .carousel-no-items-container {
}
section.carousel-cases .carousel-no-items-message {
}
section.carousel-cases .carousel-no-items-message h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

@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;
  }  
}