.c-image-container {
  overflow: hidden;
  position: relative;
}

.c-image-container.c-image-container-no-rat hp-image {
  position: relative;
}

.c-image-container--ratio-fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.c-image-container--ratio-1-1 {
  padding-bottom: 100%;
}

.c-image-container--ratio-4-3 {
  padding-bottom: 75%;
}

.c-image-container--ratio-16-9 {
  padding-bottom: 56.25%;
}

.c-image-container--align-left, .c-image-container--align-left hp-image {
  text-align: left;
}

.c-image-container--align-right, .c-image-container--align-right hp-image {
  text-align: right;
}

.c-image-container--align-center, .c-image-container--align-center hp-image {
  text-align: center;
}

hp-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  transition: opacity, 0.4s, -webkit-transform 0.4s;
  transition: opacity, transform 0.4s, 0.4s;
  transition: opacity, transform 0.4s, 0.4s, -webkit-transform 0.4s;
  width: 100%;
}

hp-image.rounded-corners {
  border-radius: 10px;
}

hp-image.rounded-corners img {
  border-radius: 10px;
}

hp-image[zoomable]:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

hp-image[mode='origin'], hp-image[mode='fit-background'], hp-image[mode='fit'] {
  display: inline-block;
  position: relative;
  vertical-align: top;
  min-width: 1px;
  min-height: 1px;
}

hp-image[mode='origin'][alt]:not([loaded]) img, hp-image[mode='fit-background'][alt]:not([loaded]) img, hp-image[mode='fit'][alt]:not([loaded]) img {
  display: inline-block;
  overflow: hidden;
}

hp-image[mode='fit-background'] .inner-image {
  visibility: hidden;
}

hp-image[mode='cover'] {
  height: 100%;
  min-width: 1px;
  min-height: 1px;
}

hp-image[mode='save-ratio'] {
  position: relative;
  height: 0;
}

hp-image[mode='save-ratio']:not([loaded]) {
  min-height: 100px;
}

hp-image:after {
  content: attr(alt);
  display: none;
}

hp-image[loaded]:after {
  display: none;
}

hp-image.with-spinner:not([loaded]) {
  min-width: 40px;
  min-height: 40px;
}

hp-image[loaded] .loader, hp-image:not(.enable-spinner) .loader {
  display: none;
}

hp-image[error]:after {
  display: inline-block;
}

hp-image[lazy]:not(.with-spinner) {
  opacity: 0;
}

hp-image[lazy]:not(.with-spinner)[ready] {
  opacity: 1;
}

hp-image.bg-v-top {
  background-position-y: top;
}

hp-image.bg-v-center {
  background-position-y: center;
}

hp-image.bg-v-bottom {
  background-position-y: bottom;
}

hp-image.bg-h-left {
  background-position-x: left;
}

hp-image.bg-h-center {
  background-position-x: center;
}

hp-image.bg-h-right {
  background-position-x: right;
}