/*Font Family SCSS Vars
$primaryFont: "ubuntu", sans-serif;
$secondaryFont: "canada-type-gibson";
$systemFonts: "system-ui", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\
*/
/*
* Global button styling
*/
/*
* 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/
*/
.block-four-grid {
  --border-size: 2px;
  --border-color-default: #000;
  --bg-dark: $black;
  --bg-light: var(--wp--preset--color--pale-blue);
  --color-dark: $white;
  --color-light: $black;
  --gap: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0 2rem;
}
@media (min-width: 783px) {
  .block-four-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: var(--gap);
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
  .block-four-grid__item {
    height: 100%;
    position: relative;
  }
  .block-four-grid__item:nth-child(odd) {
    padding-right: calc(var(--gap) / 2);
  }
  .block-four-grid__item:nth-child(odd):before {
    content: "";
    position: absolute;
    width: var(--border-size);
    top: 0;
    right: 0;
    height: 100%;
    background: var(--border-color-default);
  }
  .block-four-grid__item:nth-child(even) {
    padding-left: calc(var(--gap) / 2);
  }
  .block-four-grid__item:nth-child(1):after, .block-four-grid__item:nth-child(2):after {
    content: "";
    position: absolute;
    height: var(--border-size);
    bottom: calc(-1 * var(--gap) / 2);
    left: 0;
    width: calc(100% - var(--gap) / 2);
    background: var(--border-color-default);
  }
  .block-four-grid__item:nth-child(2):after {
    left: unset;
    right: 0;
  }
}
.block-four-grid__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(var(--gap) / 2);
}
.block-four-grid__icon {
  min-width: 15%;
}
.block-four-grid.is-style-dark, .block-four-grid.is-style-light {
  padding: 2rem;
}
.block-four-grid.is-style-dark {
  background: var(--bg-dark);
  color: white;
}
.block-four-grid.is-style-dark .four-grid__heading {
  color: white;
}
.block-four-grid.is-style-light {
  background: var(--bg-light);
}
@media (max-width: 782px) {
  .block-four-grid .four-grid__text {
    border-left: 1px solid #000;
    padding-left: 0.5em;
    font-size: 14px;
  }
}