.tile-outer-wrapper {
  width: var(--tile-width);
  max-width: var(--tile-max-width);
  margin-right: var(--tile-margin-right);
  margin-top: var(--tile-margin-top);
  width: 100%;
  max-width: none;
}
.tile-outer-wrapper .tile-inner-wrapper {
  height: 100%;
}
.tile-outer-wrapper:not(:last-of-type) .tile-inner-wrapper {
  margin-bottom: 0 !important;
}

.tile-container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.tile-container, .tile-container:hover, .tile-container *, .tile-container *:hover {
  text-decoration: none;
}
.tile-container .tile-image {
  align-self: center;
}
.tile-container[type="1"] {
  display: block;
  background-color: var(--tile-v1-background-color, var(--tile-background-color));
  padding: var(--tile-v1-padding, var(--tile-padding, var(--global-padding)));
  height: 100%;
}
.tile-container[type="1"] .tile-image {
  width: var(--tile-v1-image-width, var(--tile-image-width, auto));
  max-width: 100%;
  height: var(--tile-v1-image-height, var(--tile-image-height, auto));
  margin-top: var(--tile-v1-image-margin-top, var(--global-padding, 0));
  margin-right: var(--tile-v1-image-margin-right, auto);
  margin-bottom: var(--tile-v1-image-margin-bottom, var(--global-padding, 0));
  margin-left: var(--tile-v1-image-margin-left, auto);
  display: block;
}
.tile-container[type="1"] .tile-title,
.tile-container[type="1"] .tile-content {
  display: block;
  text-align: center;
}
.tile-container[type="1"] .tile-title {
  width: 100%;
  display: block;
  font-size: var(--tile-v1-title-font-size, var(--tile-title-font-size, 18px));
  font-weight: var(--tile-v1-title-font-weight, var(--tile-title-font-weight, 700));
  font-family: var(--tile-v1-title-title-font-family, var(--tile-title-font-family, var(--secondary-font)));
  line-height: var(--tile-v1-title-line-height, var(--tile-title-line-height, 1.2));
  color: var(--tile-v1-title-color, var(--tile-title-color, var(--primary-color)));
  padding: var(--tile-v1-title-padding, var(--tile-title-padding, 0));
  text-transform: var(--tile-v1-title-text-transform, var(--tile-title-text-transform, none));
}
.tile-container[type="1"] .tile-content {
  width: 100%;
  display: block;
  font-size: var(--tile-v1-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
  font-weight: var(--tile-v1-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
  font-family: var(--tile-v1-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
  line-height: var(--tile-v1-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
  color: var(--tile-v1-description-color, var(--tile-description-color, var(--text-color)));
  padding: var(--tile-v1-description-padding, var(--tile-description-padding, 0));
  text-transform: var(--tile-v1-description-text-transform, var(--tile-description-text-transform, none));
}
.tile-container[type="2"] {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: var(--tile-type-2-height, var(--tile-height, 250px));
}
.tile-container[type="2"].flip .tile-title {
  -webkit-animation: flip-title 0.3s linear;
          animation: flip-title 0.3s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.tile-container[type="2"].flip .tile-content {
  -webkit-animation: flip-content 0.3s linear;
          animation: flip-content 0.3s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.tile-container[type="2"] .tile-image {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  margin: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.tile-container[type="2"] .tile-title {
  -webkit-animation: unflip-title 0.3s linear;
          animation: unflip-title 0.3s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  width: var(--tile-v2-title-width, var(--tile-title-width, auto));
  font-size: var(--tile-v2-title-font-size, var(--tile-title-font-size, 18px));
  font-weight: var(--tile-v2-title-font-weight, var(--tile-title-font-weight, 700));
  font-family: var(--tile-v2-title-title-font-family, var(--tile-title-font-family, var(--secondary-font)));
  line-height: var(--tile-v2-title-line-height, var(--tile-title-line-height, 1.2));
  color: var(--tile-v2-title-color, var(--tile-title-color, #fff));
  padding: var(--tile-v2-title-padding, var(--tile-title-padding, 25px 20px 25px 20px));
  text-transform: var(--tile-v2-title-text-transform, var(--tile-title-text-transform, none));
  z-index: 100;
}
.tile-container[type="2"] .tile-title:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tile-v2-title-background-color, var(--tile-title-background-color, var(--primary-color)));
  opacity: var(--tile-v2-title-background-opacity, var(--tile-title-background-opacity, 0.75));
  z-index: -1;
}
.tile-container[type="2"] .tile-content {
  width: var(--tile-v2-expanded-width, 100%);
  font-size: var(--tile-v2-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
  font-weight: var(--tile-v2-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
  font-family: var(--tile-v2-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
  line-height: var(--tile-v2-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
  color: var(--tile-v2-description-color, var(--tile-description-color, #fff));
  padding: var(--tile-v2-description-padding, var(--tile-description-padding, 0 20px 25px 20px));
  text-transform: var(--tile-v2-description-text-transform, var(--tile-description-text-transform, none));
  transform: rotateY(90deg);
  max-height: 0%;
  overflow: hidden;
  -webkit-animation: unflip-content 0.3s linear;
          animation: unflip-content 0.3s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.tile-container[type="2"] .tile-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  background-color: var(--tile-v2-description-background-color, var(--tile-description-background-color, var(--primary-color)));
  opacity: var(--tile-v2-description-background-opacity, var(--tile-description-background-opacity, 0.75));
  z-index: -1;
}
@-webkit-keyframes flip-title {
  0% {
    transform: rotateY(0);
    width: auto;
    min-width: 0%;
  }
  50% {
    transform: rotateY(90deg);
    width: auto;
    min-width: 0%;
  }
  51% {
    transform: rotateY(90deg);
    width: 100%;
    min-width: 0%;
  }
  100% {
    transform: rotateY(0);
    width: 100%;
    min-width: var(--tile-v2-expanded-width, 100%);
  }
}
@-webkit-keyframes unflip-title {
  0% {
    transform: rotateY(0);
    min-width: var(--tile-v2-expanded-width, 100%);
  }
  50% {
    transform: rotateY(90deg);
    min-width: var(--tile-v2-expanded-width, 100%);
  }
  51% {
    transform: rotateY(90deg);
    min-width: 0%;
  }
  100% {
    transform: rotateY(0);
    min-width: 0%;
  }
}
@-webkit-keyframes flip-content {
  0% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    min-width: 0%;
  }
  50% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    min-width: 0%;
  }
  51% {
    transform: rotateY(90deg);
    max-height: 100%;
    padding-bottom: 25px;
    min-width: 0%;
  }
  100% {
    transform: rotateY(0);
    max-height: 100%;
    padding-bottom: 25px;
    min-width: var(--tile-v2-expanded-width, 100%);
  }
}
@-webkit-keyframes unflip-content {
  0% {
    transform: rotateY(0);
    max-height: 100%;
    padding-bottom: 25px;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: var(--tile-v2-expanded-width, 100%);
  }
  50% {
    transform: rotateY(90deg);
    max-height: 100%;
    padding-bottom: 25px;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: 0%;
  }
  51% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: 0%;
  }
  100% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: 0%;
  }
}
.tile-container[type="3"] {
  display: var(--tile-v3-container-display, flex);
  flex-direction: var(--tile-v3-container-flex-direction, column);
  padding: var(--tile-v3-container-padding, 0);
  background-color: var(--tile-v3-container-background-color, inherit);
  height: var(--tile-v3-container-height, 100%);
}
.tile-container[type="3"] .tile-image {
  display: block;
  width: var(--tile-v3-image-width, auto);
  max-width: var(--tile-v3-image-max-width, 100%);
  height: var(--tile-v3-image-height, var(--tile-image-height, auto));
  margin-top: var(--tile-v3-image-margin-top, 0);
  margin-right: var(--tile-v3-image-margin-right, 0);
  margin-bottom: var(--tile-v3-image-margin-bottom, 0);
  margin-left: var(--tile-v3-image-margin-left, 0);
  order: -1;
}
.tile-container[type="3"] .tile-title {
  width: 100%;
  font-size: var(--tile-v3-title-font-size, var(--tile-title-font-size, 18px));
  letter-spacing: var(--tile-v3-title-letter-spacing, var(--tile-title-letter-spacing, 0));
  font-weight: var(--tile-v3-title-font-weight, var(--tile-title-font-weight, 700));
  font-family: var(--tile-v3-title-title-font-family, var(--tile-title-font-family, var(--secondary-font)));
  line-height: var(--tile-v3-title-line-height, var(--tile-title-line-height, 1.2));
  text-align: var(--tile-v3-title-text-align, var(--tile-title-text-align, center));
  color: var(--tile-v3-title-color, var(--tile-title-color, #fff));
  margin: var(--tile-v3-title-margin, var(--tile-title-margin, 0));
  padding: var(--tile-v3-title-padding, var(--tile-title-padding, 15px 20px 15px 20px));
  text-transform: var(--tile-v3-title-text-transform, var(--tile-title-text-transform, uppercase));
  background-color: var(--tile-v3-title-background-color, var(--tile-title-background-color, var(--primary-color)));
  display: var(--tile-v3-title-display, var(--tile-title-display, block));
}
.tile-container[type="3"] .tile-content {
  width: 100%;
  height: 100%;
  font-size: var(--tile-v3-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
  letter-spacing: var(--tile-v3-description-letter-spacing, var(--tile-description-letter-spacing, 0));
  font-weight: var(--tile-v3-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
  font-family: var(--tile-v3-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
  text-align: var(--tile-v3-description-text-align, var(--tile-description-text-align, center));
  line-height: var(--tile-v3-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
  color: var(--tile-v3-description-color, var(--tile-description-color, #fff));
  padding: var(--tile-v3-description-padding, var(--tile-description-padding, 0 20px 15px 20px));
  margin: var(--tile-v3-description-margin, var(--tile-description-margin, 0));
  text-transform: var(--tile-v3-description-text-transform, var(--tile-description-text-transform, none));
  background-color: var(--tile-v3-description-background-color, var(--tile-description-background-color, var(--primary-color)));
  display: var(--tile-v3-description-display, var(--tile-description-display, block));
}
.tile-container[type="4"] {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: var(--tile-type-4-padding, 30px);
  z-index: 100;
  min-height: var(--tile-type-2-height, var(--tile-height, 250px));
}
.tile-container[type="4"] .tile-image {
  display: none;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: var(--tile-type-4-image-transform, translate(-50%, -50%));
  z-index: -1;
}
.tile-container[type="4"] .tile-content {
  background-color: rgba(255, 255, 255, 0);
  order: 2;
  font-size: var(--tile-type-4-content-font-size, 24px);
  line-height: var(--tile-type-4-content-line-height, 1.4);
  font-weight: 700;
  color: #fff;
}
.tile-container[type="4"] .tile-title,
.tile-container[type="4"] .tile-title:focus {
  order: 3;
  display: inline-block;
  width: auto;
  margin: var(--tile-type-4-button-margin, 20px 0 0);
  border-radius: var(--button-border-radius, var(--border-radius, 0));
  border: var(--button-border-width, 0) solid var(--button-border-color, var(--primary-color));
  color: var(--button-color, #fff);
  background-color: var(--button-background-color, var(--primary-color));
  font-family: var(--button-font-family, var(--secondary-font, var(--primary-font)));
  font-size: var(--button-font-size, var(--p-font-size));
  line-height: var(--button-line-height, var(--p-line-height));
  font-weight: var(--button-font-weight, var(--p-font-weight));
  padding: var(--button-padding-top, var(--button-padding, 10px)) var(--button-padding-right, var(--button-padding, 30px)) var(--button-padding-bottom, var(--button-padding, 10px)) var(--button-padding-left, var(--button-padding, 30px));
  -webkit-text-decoration: var(--button-text-decoration, none);
  text-decoration: var(--button-text-decoration, none);
  text-transform: var(--button-text-transform, none);
  transition-duration: var(--button-transition-duration, background-color);
  transition-duration: var(--button-transition-duration, var(--transition-duration));
}
.tile-container[type="4"] .tile-title:hover,
.tile-container[type="4"] .tile-title:focus:hover {
  background-color: var(--tile-type-4-button-hover-background-color, var(--secondary-color));
}
.tile-container[type="4"]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  z-index: -1;
  opacity: 0.75;
}
.tile-container[type="4"] * {
  color: #fff;
}
.tile-container[type="5"] {
  display: grid;
  grid-template-columns: var(--tile-type-5-image-width, 150px) auto;
  grid-template-rows: auto auto;
  gap: var(--tile-type-5-horizontal-gap, var(--tile-type-5-gap, 0)) var(--tile-type-5-vertical-gap, var(--tile-type-5-gap, 0));
  grid-template-areas: "tile-image tile-title" "tile-image tile-content";
}
.tile-container[type="5"] .tile-image {
  width: 100%;
  grid-area: tile-image;
  align-self: var(--tile-v5-title-image-align-self, flex-start);
}
.tile-container[type="5"] .tile-title {
  grid-area: tile-title;
  display: block;
  font-size: var(--tile-v5-title-font-size, var(--tile-title-font-size, var(--p-font-size)));
  font-weight: var(--tile-v5-title-font-weight, var(--tile-title-font-weight, 700));
  font-family: var(--tile-v5-title-title-font-family, var(--tile-title-font-family, var(--primary-font)));
  line-height: var(--tile-v5-title-line-height, var(--tile-title-line-height, 1));
  color: var(--tile-v5-title-color, var(--tile-title-color, var(--text-color)));
  padding: var(--tile-v5-title-padding, var(--tile-title-padding, 0));
  text-transform: var(--tile-v5-title-text-transform, var(--tile-title-text-transform, none));
}
.tile-container[type="5"] .tile-content {
  grid-area: tile-content;
  display: block;
  font-size: var(--tile-v5-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
  font-weight: var(--tile-v5-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
  font-family: var(--tile-v5-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
  line-height: var(--tile-v5-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
  color: var(--tile-v5-description-color, var(--tile-description-color, var(--text-color)));
  padding: var(--tile-v5-description-padding, var(--tile-description-padding, 0));
  text-transform: var(--tile-v5-description-text-transform, var(--tile-description-text-transform, none));
}

#editor .tile-container .tile-image {
  padding-top: 33%;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#editor .tile-container input,
#editor .tile-container textarea {
  border-radius: 0;
  border-width: 0;
}
#editor .tile-container[type="2"] .tile-title,
#editor .tile-container[type="2"] .tile-content {
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--tile-v2-title-color, var(--tile-title-color, #fff));
  background-color: var(--tile-v2-title-background-color, var(--tile-title-background-color, var(--primary-color)));
}