.hover-card {
  position: relative;
  z-index: 0;
  cursor: pointer;
  -webkit-perspective: 500px;
  perspective: 500px;
  background-color: transparent;
  height: calc(var(--max-width)/ var(--per-row) - var(--gutter))
}

@supports (aspect-ratio: 1/1) {
  .hover-card {
    height:auto
  }

  .hover-card--square {
    aspect-ratio: 1/1
  }

  .hover-card--rectangle {
    aspect-ratio: 595/220
  }

  @media (max-width: 1023px) {
    .hover-card--rectangle {
      aspect-ratio:3/2
    }
  }

  .hover-card--tall-rectangle {
    aspect-ratio: 400/300
  }

  @media (max-width: 1023px) {
    .hover-card--tall-rectangle {
      aspect-ratio:3/2
    }
  }
}

.hover-card--active .hover-card__body,.hover-card:focus .hover-card__body,.hover-card:focus-within .hover-card__body,.hover-card:hover .hover-card__body {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

@media (max-width: 799px) {
  .hover-card {
    max-width:100%;
    min-height: 220px
  }

  .hover-card.widget-span+.hover-card.widget-span {
    margin-top: 20px
  }
}

.hover-card--has-ctas--active .hover-card__side--back,.hover-card--has-ctas:focus .hover-card__side--back,.hover-card--has-ctas:focus-within .hover-card__side--back,.hover-card--has-ctas:hover .hover-card__side--back {
  -webkit-box-shadow: var(--boxed-shadow);
  box-shadow: var(--boxed-shadow)
}

.hover-card__body {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .5s transform ease-in-out;
  transition: .5s transform ease-in-out
}

.hover-card__body .section__ctas {
  margin-top: .5em
}

.hover-card__side {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  --pad: 25px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: var(--pad);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--background-color,#fff);
  z-index: 0;
  -webkit-transition: .2s box-shadow;
  transition: .2s box-shadow
}

.hover-card__side.module-wrapper--dark {
  background-color: var(--background-color,#000)
}

.hover-card__side>img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0
}

.hover-card__side--back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

.hover-card__side--has-image::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  background-color: var(--background-color,transparent);
  opacity: var(--overlay-opacity,.5);
  z-index: 50
}

.hover-card__content {
  position: relative;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.text--center .hover-card__content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.text--right .hover-card__content {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

.hover-card__content a {
  position: relative;
  z-index: 100
}

.hover-card-section--slider .slick-slider .slick-slide>div {
  padding: 0 calc(var(--gutter)/ 2)
}

.hover-card-section--slider .slick-slider .slick-list {
  padding: 1em 0
}

.hover-card-section:not(.hover-card-section--slider) .row-fluid {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}

@media (min-width: 800px) {
  .hover-card-section:not(.hover-card-section--slider) .row-fluid {
    margin-right:calc(-1 * var(--gutter))
  }

  .hover-card-section:not(.hover-card-section--slider) .row-fluid .hover-card {
    margin-right: var(--gutter);
    width: calc((100% - var(--gutter) * var(--per-row,1))/ var(--per-row))
  }
}

@media (max-width: 799px) {
  .hover-card-section:not(.hover-card-section--slider) .row-fluid .hover-card {
    max-width: 100%;
    width: 100%;
    min-height: 220px;
  }
}

.hover-card-section:not(.hover-card-section--slider) .hover-card-container {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--gutter));
}

.hover-card-section:not(.hover-card-section--slider) .row-fluid .hover-card {
  margin-left: 0;
  min-height: 350px;
}