: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-portfolio-featured {
  display: grid;
  grid-template-columns: 1fr minmax(5rem, 116rem) 1fr;
  gap: 3rem;
  margin: var(--spacer) 0;
}
@media (min-width: 1024px) {
  .block-portfolio-featured {
    gap: 4rem;
  }
}
.block-portfolio-featured > .wrap {
  grid-column: 2;
  grid-row: 1;
}
.block-portfolio-featured .cta-bg {
  display: block;
  grid-row: 1;
  grid-column: 1/span 2;
  background: #7db41f;
}
@media (max-width: 781px) {
  .block-portfolio-featured .cta-bg {
    grid-column: 1/span 3;
  }
}
.block-portfolio-featured .porfolio-excerpt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-end;
  height: 250px;
  text-decoration: none;
  margin-bottom: 4px;
  color: #fff;
  background: #2B6741;
  position: relative;
  overflow: hidden;
}
.block-portfolio-featured .porfolio-excerpt:after {
  content: "";
  display: block;
  background: #2B6741;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.28s ease-in-out;
}
.block-portfolio-featured .porfolio-excerpt .bg {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.block-portfolio-featured .porfolio-excerpt .bg:after {
  content: "";
  display: block;
  background: rgba(13, 38, 22, 0.6);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.block-portfolio-featured .porfolio-excerpt img {
  max-width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  z-index: 7;
  transition: opacity 0.25s ease-in-out;
}
.block-portfolio-featured .porfolio-excerpt p {
  font-family: "Roboto", sans-serif;
  font-size: var(--wp--preset--font-size--step-0);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  padding: 0 2rem 1rem 2rem;
  color: #fff;
  position: relative;
  z-index: 5;
  transition: opacity 0.18s ease-in-out;
}
.block-portfolio-featured .porfolio-excerpt .blurb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.block-portfolio-featured .porfolio-excerpt .blurb p {
  font-weight: 300;
  line-height: 1.175;
  text-align: left;
  padding: 1.5rem;
}
.block-portfolio-featured .porfolio-excerpt svg {
  display: block;
  width: 36px;
  height: 36px;
}
.block-portfolio-featured .porfolio-excerpt .btn-sm {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: var(--wp--preset--font-size--step-m-1);
  font-weight: 500;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 7;
  transition: opacity 0.25s ease-in-out 0.05s;
}
.block-portfolio-featured .porfolio-excerpt .btn-sm em {
  font-style: normal;
}
.block-portfolio-featured .porfolio-excerpt:hover:after, .block-portfolio-featured .porfolio-excerpt:active:after, .block-portfolio-featured .porfolio-excerpt:focus:after {
  opacity: 1;
}
.block-portfolio-featured .porfolio-excerpt:hover .btn-sm, .block-portfolio-featured .porfolio-excerpt:active .btn-sm, .block-portfolio-featured .porfolio-excerpt:focus .btn-sm {
  color: #fff;
  opacity: 1;
}
.block-portfolio-featured .porfolio-excerpt:hover .meta,
.block-portfolio-featured .porfolio-excerpt:hover img, .block-portfolio-featured .porfolio-excerpt:active .meta,
.block-portfolio-featured .porfolio-excerpt:active img, .block-portfolio-featured .porfolio-excerpt:focus .meta,
.block-portfolio-featured .porfolio-excerpt:focus img {
  opacity: 0;
}
.block-portfolio-featured .porfolio-excerpt:hover .blurb, .block-portfolio-featured .porfolio-excerpt:active .blurb, .block-portfolio-featured .porfolio-excerpt:focus .blurb {
  opacity: 1;
}
@media (min-width: 600px) {
  .block-portfolio-featured .companies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .block-portfolio-featured .companies-grid .porfolio-excerpt {
    height: 45vw;
    max-height: 280px;
    margin-bottom: 0;
  }
  .block-portfolio-featured .companies-grid .porfolio-excerpt img {
    max-width: 55%;
  }
}
.block-portfolio-featured .info {
  padding: var(--spacer-sm) 0;
  color: #fff;
}

@media (min-width: 782px) {
  .block-portfolio-featured > .wrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  .block-portfolio-featured > .wrap:after {
    content: "";
    width: 10px;
    background: #7db41f;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
  }
  .block-portfolio-featured > .wrap > div {
    flex-basis: 50%;
  }
  .block-portfolio-featured > .wrap > div.info {
    order: -1;
    padding: var(--spacer) var(--spacer) var(--spacer) 0;
  }
  .block-portfolio-featured > .wrap > div.info > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .block-portfolio-featured > .wrap > div.info .btn {
    margin: auto auto 0 0;
  }
  .block-portfolio-featured > .wrap > div.companies-grid .porfolio-excerpt {
    height: 210px;
  }
}
@media (min-width: 1024px) {
  .block-portfolio-featured > .wrap > div.info {
    flex-basis: calc(33.33% - 8px);
  }
  .block-portfolio-featured > .wrap > div.companies-grid {
    flex-basis: calc(66.66% + 8px);
  }
  .block-portfolio-featured > .wrap > div.companies-grid .porfolio-excerpt {
    height: 300px;
  }
}/*# sourceMappingURL=block-portfolio-featured.css.map */