.et-content-boxes-wrapper {
  justify-content: center;
  & > .row {
    justify-content: center;
  }
  position: relative;
  .et-content-box {
    margin-bottom: $grid-gutter-width / 2;
    margin-top: $grid-gutter-width / 2;

    &:not(.et-content-box-textOnImage) {
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      .et-content-box-backdrop {
        min-width: 100%; // to allow for proper text alignment even if text is less than one full line long
      }
    }

    .et-text-shadow {
      text-shadow: 0 0 3px $colorFontDark;
    }

    &.et-content-box-textOverImage {
      .et-content-box-text-wrapper {
        order: 1;
      }
      .et-content-box-image {
        order: 2;
      }
    }

    &.et-content-box-textOnImage {
      .et-content-box-text-wrapper {
        position: absolute;
        top: 0;
        bottom:0;
        left: 0;
        right: 0;
      }
      .et-backdrop-visible {
        background-color: $colorBackdrop;
        padding: 20px;
        // always go full available width below md
        width: 100%;
        @include media-breakpoint-up(md) {
          width: auto;
        }
        @include media-breakpoint-up(lg) {
          padding: 30px;
        }
        .et-content-box-text {
          color: color-yiq($colorBackdrop);
        }
      }
      .et-backdrop-transparent {
        background-color: transparent;
        padding: 20px;
        @include media-breakpoint-up(lg) {
          padding: 30px;
        }
        .et-content-box-text {
          color: $colorFontLight;
        }
      }
    }
  }

  img {
    border-radius: $border-radius;
  }
  &.et-content-boxes-nopadding {
    img {
      border-radius: 0;
    }
  }

  .et-content-box-backdrop {
    border-radius: $border-radius;
  }
  .et-content-box-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    @include media-breakpoint-up(lg) {
      padding: 30px;
    }
  }

  .et-align-vertical-top .et-content-box-text-wrapper {
    justify-content: flex-start;
  }

  .et-align-vertical-center .et-content-box-text-wrapper {
    justify-content: center;
  }

  .et-align-vertical-bottom .et-content-box-text-wrapper {
    justify-content: flex-end;
  }

  .et-align-vertical-fullHeight .et-content-box-text-wrapper .et-content-box-backdrop {
    height: 100%;
  }

  .et-align-horizontal-left .et-content-box-text-wrapper {
    align-items: flex-start;
  }

  .et-align-horizontal-center .et-content-box-text-wrapper {
    align-items: center;
    .et-content-box-cta {
      text-align: center;
    }
  }

  .et-align-horizontal-right .et-content-box-text-wrapper {
    align-items: flex-end;
    .et-content-box-cta {
      text-align: right;
    }
  }

  .et-align-horizontal-fullWidth .et-content-box-text-wrapper .et-content-box-backdrop {
    width: 100%;
  }

  .et-content-box-content {
    width: 100%;
    position: relative; // relative to allow absolute positioning of text on the image
    display: flex; // flex is required to fiddle with the order of image/text depending on layout
    flex-direction: column;
    border-radius: $border-radius;

    background-color: $colorNeutral3;
    color: color-yiq($colorNeutral3);

    & > a {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .et-content-box-text {
      color: color-yiq($colorNeutral3);
      > *:last-child {
        margin-bottom: 0;
      }
    }

    .et-content-box-text-wrapper {
      width: 100%;
      &:first-child:last-child {
        // Only set height to 100% if the text wrapper is the only child to allow for proper vertical centering and don't mess with image heights if they are present.
        height: 100%;
      }
    }
  }

  .et-content-box-image {
    &.et-image-contain,
    &.et-image-cover {
      // We need fixed sizes here to enable contain/cover functionality
      // More sizes per breakpoint and layout can be set via backend
      height: 360px;
    }
  }

  .et-content-box-cta {
    margin-top: 20px;
  }

  .et-content-box-product-inner {
    height: 100%;
    .productbox {
      height: 100%;
    }
  }

  &.et-hover-style-zoom {
    .et-content-box-image {
      overflow: hidden;
      img {
        transition: transform .5s ease-in-out;
      }
    }
    .et-content-box:hover .et-content-box-image img {
      transform: scale(1.2);
    }
  }
}

.et-content-boxes-slider.et-equal-height-slides {
  .slick-slide {
    & > div,
    .et-content-box,
    .et-content-box-content {
      height: 100%;
    }
  }
}
.et-content-boxes-nopadding {
  .slick-slide {
    padding-left: 0;
    padding-right: 0;
  }
}
.et-content-boxes-general-link {
  .btn-link {
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
    padding-left: 0;
  }
  &.et-position-below-boxes {
    margin-top: $grid-gutter-width / 2;
  }
  &.et-position-above-boxes {
    margin-bottom: $grid-gutter-width / 2;
  }
  &.et-align-horizontal-left {
    text-align: left;
  }
  &.et-align-horizontal-center {
    text-align: center;
  }
  &.et-align-horizontal-right {
    text-align: right;
  }
}