:root {
  --carousel-blog-posts-page-items: 2.75;
  --carousel-blog-posts-page-items: 2.25;
  --carousel-blog-column-gap: 45px;
  --carousel-blog-row-gap: 0;
  --carousel-blog-column-gap-half: calc(var(--carousel-blog-column-gap) / 2);
}
section.carousel-blog-posts {
  position: relative;
  overflow: hidden;
}
section.carousel-blog-posts .section-bkgd {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -100;
  background-color: var(--color-grey-lighter);
}
section.carousel-blog-posts .section-content {
  /* width: var(--content-width); */
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: 85px 0 120px 0;
}
section.carousel-blog-posts .section-content-heading {
  margin-bottom: 0;
}
section.carousel-blog-posts .section-content-text {
  margin-top: 15px;
}
section.carousel-blog-posts .carousel {
}
section.carousel-blog-posts .carousel-inner {
  overflow: visible;
}
section.carousel-blog-posts .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;
  margin: 30px 0 0 0;
  padding: 0;

  /* .fix-3 */
  position: relative;
  left: calc(-1 * var(--carousel-blog-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-blog-column-gap-half) * 2));
  scroll-padding: 0 0 0 calc(var(--carousel-blog-column-gap-half));
  margin: 0;
}
section.carousel-blog-posts .carousel-scroll-container::-webkit-scrollbar { 
  display: none;  /* Chrome and Safari older versions */
}
section.carousel-blog-posts .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-blog-column-gap);
  padding: 35px 0; /* Prevent top/bottom of box-shadow on .carousel-grid-item from being clipped */
}
section.carousel-blog-posts .carousel-grid-item {
  position: relative;
  width: calc((var(--content-width) - ((var(--carousel-blog-posts-page-items) - 1) * var(--carousel-blog-column-gap))) / var(--carousel-blog-posts-page-items));
  flex: 0 0 auto;
  padding: 21px 21px 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-blog-posts .carousel-grid-item:first-of-type {
  margin-left: var(--carousel-blog-column-gap-half);
}
section.carousel-blog-posts .carousel-grid-item:last-of-type {
  margin-right: var(--carousel-blog-column-gap-half);
}
section.carousel-blog-posts .carousel-grid-item-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  outline: none;
  cursor: pointer;
}
section.carousel-blog-posts .carousel-grid-item .carousel-grid-item-inner {
  position: relative;
  height: 100%;
  padding: 0 0 70px 0;

  /* .fix-3 */
  padding: 21px 21px 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-blog-posts .carousel-grid-item:hover .carousel-grid-item-inner {
  transform: scale(1.05);
}
section.carousel-blog-posts .carousel-grid-item .carousel-grid-item-content {
  /* .fix-3 */
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0 70px 0;
}
section.carousel-blog-posts .carousel-grid-item .post-title-img-link {
  text-decoration: none;
}
section.carousel-blog-posts .carousel-grid-item figure {
  overflow: hidden;
  aspect-ratio: 1.4/1;
  margin: 0;
  border-radius: 15px;
}
section.carousel-blog-posts .carousel-grid-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.carousel-blog-posts .carousel-grid-item .post-date {
  margin-top: 15px;
}
section.carousel-blog-posts .carousel-grid-item .post-date p {
  font-size: 1.375rem;
}
section.carousel-blog-posts .carousel-grid-item .post-author {
  margin-top: 2px;
}
section.carousel-blog-posts .carousel-grid-item .post-author p {
  font-size: 1.375rem;
}
section.carousel-blog-posts .carousel-grid-item .post-title {
  display: block;
  width: calc(100% - 120px);
  margin-top: 18px;
  text-decoration: none;
}
section.carousel-blog-posts .carousel-grid-item .post-title:hover,
section.carousel-blog-posts .carousel-grid-item .post-title:focus,
section.carousel-blog-posts .carousel-grid-item .post-title:active {
  text-decoration: none;
}
section.carousel-blog-posts .carousel-grid-item .post-title h3 {
  display: inline;
  font-size: 1.875rem;
  font-weight: 700;
}
section.carousel-blog-posts .carousel-grid-item .post-excerpt {
  margin-top: 18px;
}
section.carousel-blog-posts .carousel-grid-item .post-excerpt p {
}
section.carousel-blog-posts .carousel-grid-item .button {
  position: absolute;
  bottom: 0;
  z-index: 2;
}
/* Old dark gray hightlight hovery style */
section.carousel-blog-posts .carousel-grid-item:hover,
section.carousel-blog-posts .carousel-grid-item:has(:focus),
section.carousel-blog-posts .carousel-grid-item:has(:active) {
  /*
  background-color: var(--color-grey-dark);
  color: #fff;
  */
}
section.carousel-blog-posts .carousel-grid-item:hover .post-title:after,
section.carousel-blog-posts .carousel-grid-item:has(:focus) .post-title:after,
section.carousel-blog-posts .carousel-grid-item:has(:active) .post-title:after {
  /*
  filter: invert(100%);
  */
}
section.carousel-blog-posts .carousel-grid-item:hover h3,
section.carousel-blog-posts .carousel-grid-item:has(:focus) h3,
section.carousel-blog-posts .carousel-grid-item:has(:active) h3,
section.carousel-blog-posts .carousel-grid-item:hover .post-excerpt p,
section.carousel-blog-posts .carousel-grid-item:has(:focus) .post-excerpt p,
section.carousel-blog-posts .carousel-grid-item:has(:active) .post-excerpt p {
  /*
  color: #fff;
  */
}
section.carousel-blog-posts .carousel-more-button {
  margin: 25px 0 0 0;
}
section.carousel-blog-posts .carousel-no-items-container {
}
section.carousel-blog-posts .carousel-no-items-message {
}
section.carousel-blog-posts .carousel-no-items-message h3 {
  font-size: 1.875rem;
  font-weight: 700;
}

@media only screen and (max-width: 1024px) {
  :root {
    --carousel-blog-posts-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-blog-posts-page-items: 1;
  }  
}