/* The normal image determines layout and remains visible when JavaScript is absent. */
.progressive-block{display:block}
.progressive-cover{display:block;width:fit-content;max-width:100%;margin:0 auto 35px}
.progressive-cover>.cover{margin:0}
.hp-position-left .hp-photo[data-progressive-image]{--progressive-position:left 68%!important}
.hp-position-center .hp-photo[data-progressive-image]{--progressive-position:center 68%!important}
.hp-position-right .hp-photo[data-progressive-image]{--progressive-position:right 68%!important}
@media(max-width:700px){
  .hp-position-left .hp-photo[data-progressive-image]{--progressive-position:24% top!important}
  .hp-position-center .hp-photo[data-progressive-image]{--progressive-position:center top!important}
  .hp-position-right .hp-photo[data-progressive-image]{--progressive-position:76% top!important}
}
[data-progressive-image].has-image-preview{
  background-image:var(--progressive-preview)!important;
  background-size:var(--progressive-fit,contain);
  background-position:var(--progressive-position,center);
  background-repeat:no-repeat;
}
html.has-progressive-images [data-progressive-image] img[data-progressive-full]{
  opacity:0!important;
  transition:opacity .18s ease-out;
}
html.has-progressive-images [data-progressive-image].is-image-ready img[data-progressive-full]{opacity:1!important}
html.has-progressive-images [data-progressive-image].is-image-unavailable img[data-progressive-full]{opacity:0!important}
@media(prefers-reduced-motion:reduce){
  html.has-progressive-images [data-progressive-image] img[data-progressive-full]{transition:none}
}
@media print{
  html.has-progressive-images [data-progressive-image] img[data-progressive-full]{opacity:1!important;transition:none}
  [data-progressive-image].has-image-preview{background-image:none!important}
}