/* Square Overlay **/
.tiles-square-overlay {
  display: flex;
  flex-wrap: wrap;
  postiion: relative;
  margin: -2.5em 0 0 -2.5em;
}

.tiles-square-overlay article {
  -moz-transition:
    -moz-transform 0.5s ease,
    opacity 0.5s ease;
  -webkit-transition:
    -webkit-transform 0.5s ease,
    opacity 0.5s ease;
  -ms-transition:
    -ms-transform 0.5s ease,
    opacity 0.5s ease;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
  position: relative;
  width: calc(33.33333% - 2.5em);
  margin: 2.5em 0 0 2.5em;
}

.tiles-square-overlay article > .image {
  -moz-transition: -moz-transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  transition: transform 0.5s ease;
  position: relative;
  display: block;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.tiles-square-overlay article > .image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}

.tiles-square-overlay article > .image:before {
  pointer-events: none;
  -moz-transition:
    background-color 0.5s ease,
    opacity 0.5s ease;
  -webkit-transition:
    background-color 0.5s ease,
    opacity 0.5s ease;
  -ms-transition:
    background-color 0.5s ease,
    opacity 0.5s ease;
  transition:
    background-color 0.5s ease,
    opacity 0.5s ease;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  opacity: 0.8;
}

.tiles-square-overlay article > .image:after {
  pointer-events: none;
  -moz-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 0.25px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='100' y2='100' /%3E%3Cline x1='100' y1='0' x2='0' y2='100' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.25;
  z-index: 2;
}

.tiles-square-overlay article > a {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -moz-transition:
    background-color 0.5s ease,
    -moz-transform 0.5s ease;
  -webkit-transition:
    background-color 0.5s ease,
    -webkit-transform 0.5s ease;
  -ms-transition:
    background-color 0.5s ease,
    -ms-transform 0.5s ease;
  transition:
    background-color 0.5s ease,
    transform 0.5s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
  border-radius: 4px;
  border-bottom: 0;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  z-index: 3;
}

.tiles-square-overlay article > a > :last-child {
  margin: 0;
}

.tiles-square-overlay article > a:hover {
  color: #ffffff !important;
}

.tiles-square-overlay article > a h2 {
  font-size: 1.1em;
  margin: 0;
}

.breathe-template .tiles-square-overlay article > a h2 {
  font-size: 1.4em;
  margin: 0;
}

.tiles-square-overlay article > a .content {
  -moz-transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  -webkit-transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  -ms-transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  width: 100%;
  max-height: 0;
  line-height: 1.5;
  margin-top: 0.35em;
  opacity: 0;
}

.tiles-square-overlay article > a .content > :last-child {
  margin-bottom: 0;
}

.tiles-square-overlay article {
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
  position: relative;
  width: calc(33.33333% - 2.5em);
  margin: 2.5em 0 0 2.5em;
}

.tiles-square-overlay article.style1 > .image:before {
  background-color: var(--primary-color);
}

.tiles-square-overlay article.style2 > .image:before {
  background-color: color-mix(in srgb, var(--primary-color) 90%, var(--background-color) 75%);
}

.tiles-square-overlay article.style3 > .image:before {
  background-color: color-mix(in srgb, var(--primary-color) 90%, var(--text-color) 10%);
}

.tiles-square-overlay article.style4 > .image:before {
  background-color: color-mix(in srgb, var(--primary-color) 90%, var(--background-color) 75%);
}

.tiles-square-overlay article.style5 > .image:before {
  background-color: color-mix(in srgb, var(--primary-color) 90%, var(--text-color) 20%);
}

.tiles-square-overlay article.style6 > .image:before {
  background-color: color-mix(in srgb, var(--primary-color) 70%, var(--text-color) 20%);
}

body:not(.is-touch) .tiles-square-overlay article:hover > .image {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

body:not(.is-touch) .tiles-square-overlay article:hover > .image:before {
  background-color: #333333;
  opacity: 0.35;
}

body:not(.is-touch) .tiles-square-overlay article:hover > .image:after {
  opacity: 0;
}

body:not(.is-touch) .tiles-square-overlay article:hover .content {
  max-height: 15em;
  opacity: 1;
}

* + .tiles-square-overlay {
  margin-top: 2em;
}

body.is-preload .tiles-square-overlay article {
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0;
}

body.is-touch .tiles-square-overlay article .content {
  max-height: 15em;
  opacity: 1;
}

@media screen and (max-width: 1280px) {
  .tiles-square-overlay {
    margin: -1.25em 0 0 -1.25em;
  }

  .tiles-square-overlay article {
    width: calc(33.33333% - 1.25em);
    margin: 1.25em 0 0 1.25em;
  }
}

@media screen and (max-width: 980px) {
  .tiles-square-overlay {
    margin: -2.5em 0 0 -2.5em;
  }

  .tiles-square-overlay article {
    width: calc(50% - 2.5em);
    margin: 2.5em 0 0 2.5em;
  }
}

@media screen and (max-width: 736px) {
  .tiles-square-overlay {
    margin: -1.25em 0 0 -1.25em;
  }

  .tiles-square-overlay article {
    width: calc(50% - 1.25em);
    margin: 1.25em 0 0 1.25em;
  }

  .tiles-square-overlay article:hover > .image {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@media screen and (max-width: 480px) {
  .tiles-square-overlay {
    margin: 0;
  }

  .tiles-square-overlay article {
    width: 100%;
    margin: 1.25em 0 0 0;
  }
}
/* Finish Square Overlay **/