:root {
  --spacer: 4rem;
  --spacer-md: 4rem;
  --spacer-sm: 3rem;
}

@media (min-width: 1024px) {
  :root {
    --spacer: 6rem;
    --spacer-md: 5rem;
    --spacer-sm: 4rem;
  }
}
/*
* Breakpoint debugging
*/
/*
* MEDIA QUERIES
* Breakpoints for responsive sites
*/
/*
* SASS Parent append
* Useful if you want to add an append to the parent without writing it out again
* Usage: @include parent-append(":hover")
* Source: https://codepen.io/imkremen/pen/RMVBvq
*/
/*
* Skew
* Useful mixing to create skewed edges
* Usage: @include angle-edge(bottomright, 3deg, topleft, 3deg, #fff);
* Source: http://www.hongkiat.com/blog/skewed-edges-css/
*/
/*
* TEXT TRUNCATE
* An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.
* Usage: @include text-truncate;
* Source: http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
*/
/*
* DON'T BREAK
* Useful mixing so links don't overrun their container
* Usage: @include dontbreak();
* Source: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
*/
/*
* Dynamic Spacing
* A nice easy way to create a vertical rhythm for section of content
*/
/*
* Accessibility Focus
* Using the focus-visible psuedo class to only show focus styles when the element is focused via the keyboard
*/
.block-content-slider-wrap {
  margin: 0 0 var(--spacer) 0;
}

.block-content-slider .inner {
  display: grid;
  grid-template-columns: 1fr minmax(5rem, 116rem) 1fr;
  gap: 3rem;
  grid-template-rows: minmax(5rem, 25rem) 1fr;
}
@media (min-width: 1024px) {
  .block-content-slider .inner {
    gap: 4rem;
  }
}
.block-content-slider .cta-bg {
  display: block;
  grid-row: 1;
  grid-column: 1/span 3;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.block-content-slider .cta-bg:after {
  content: "";
  display: block;
  background: rgba(43, 103, 65, 0.2);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.block-content-slider .cta-bg .swiper-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 90px;
  height: 36px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
}
.block-content-slider .cta-bg .swiper-nav .swiper-button-next,
.block-content-slider .cta-bg .swiper-nav .swiper-button-prev {
  width: 36px;
  height: 36px;
  position: relative;
  top: 0;
  right: auto;
  left: auto;
  margin: 0;
  border: 1px solid #F0F4EC;
  transition: opacity 0.2s ease-in-out;
}
.block-content-slider .cta-bg .swiper-nav .swiper-button-next:hover,
.block-content-slider .cta-bg .swiper-nav .swiper-button-prev:hover {
  opacity: 0.7;
}
.block-content-slider .cta-bg .swiper-nav .swiper-button-next:after,
.block-content-slider .cta-bg .swiper-nav .swiper-button-prev:after {
  display: none;
}
.block-content-slider .cta-bg .swiper-nav .swiper-button-next.swiper-button-lock,
.block-content-slider .cta-bg .swiper-nav .swiper-button-prev.swiper-button-lock {
  display: block !important;
}
.block-content-slider .wrap {
  grid-row: 2;
  grid-column: 2;
}

@media (min-width: 782px) {
  .block-content-slider .inner {
    grid-template-columns: calc(15px + 0.5vw) 1fr 1fr 1fr calc(15px + 0.5vw);
    grid-template-rows: 420px;
    gap: 0;
  }
  .block-content-slider .cta-bg {
    grid-column: 1/span 3;
  }
  .block-content-slider .cta-bg .swiper-nav {
    bottom: 14px;
    right: 7px;
  }
  .block-content-slider .wrap {
    grid-row: 1;
    grid-column: 4;
    z-index: 9;
  }
  .block-content-slider .meta {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacer-sm) 0 0 var(--spacer-sm);
  }
  .block-content-slider .meta p {
    margin-bottom: 3rem;
  }
  .block-content-slider .meta .btn {
    margin: auto auto 0 0;
  }
}
@media (min-width: 1240px) {
  .block-content-slider .inner {
    grid-template-columns: 1fr minmax(5rem, 38.66rem) minmax(5rem, 38.66rem) minmax(5rem, 38.66rem) 1fr;
  }
}/*# sourceMappingURL=block-content-slider.css.map */