.jdm-c-hr {}
  .jdm-c-hr--button {
    background: transparent;
    border: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }
  .jdm-c-hr--image {
    flex: 0 0 auto;
    line-height: 0;
  }
  .jdm-c-hr--popup {
    align-items: flex-start;
    background-color: #000000;
    color: #FFFFFF;
    margin: 0 auto;
    max-width: 30em;
    padding: 1em;
    position: relative;
    width: 100%;
  }
  .jdm-c-hr--popup::before {
    border-style: solid;
    border-width: 0 1em 1em 1em;
    border-color: transparent transparent #000000 transparent;
    bottom: 100%;
    content: '';
    left: 50%;
    position: absolute;
    transform: translate3d(-50%, 0, 0);
  }
  .jdm-c-hr--popupBody {
    align-self: center;
    flex: 1 1 auto;
  }
  .jdm-c-hr--popupImage {
    flex: 0 0 25%;
    line-height: 0;
    margin-bottom: 1em;
  }
  .jdm-c-hr--popupImage img {
    border: 0.125em solid #FFFFFF;
    padding: 0.125em;
    width: 100%;
  }
  .jdm-c-hr--popupWrapper {
    margin-top: 1em;
  }
  .jdm-c-hr--separator {
    align-items: center;
    display: flex;
  }
  .jdm-c-hr--separator::after,
  .jdm-c-hr--separator::before {
    background-color: #000000;
    content: '';
    display: block;
    height: 4px;
    flex: 1 1 auto;
  }

.jdm-c-hr-interactive .jdm-c-hr--popup {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate3d(-50%, 0, 0);
  z-index: 1;
}
.jdm-c-hr-interactive .jdm-c-hr--popupWrapper {
  display: none;
  position: relative;
}

.jdm-c-hr-expanded .jdm-c-hr--popup {
  animation: jdm-c-hr-expanded--popup 0.5s ease 0s 1 normal both;
}
.jdm-c-hr-expanded .jdm-c-hr--popupWrapper {
  display: block;
}

@keyframes jdm-c-hr-expanded--popup {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -2em, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes jdm-c-hr-expanded--popup {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

@media (min-width: 30em) {
  .jdm-c-hr--popup {
    display: flex;
  }
  .jdm-c-hr--popupImage {
    margin-bottom: 0;
    margin-left: 1em;
    order: 2;
  }

  @supports (object-fit: cover) {
    .jdm-c-hr--popupImage {
      position: relative;
    }
    .jdm-c-hr--popupImage::before {
      content: '';
      display: block;
      padding-top: 100%;
    }
    .jdm-c-hr--popupImage img {
      height: 100%;
      left: 0;
      object-fit: cover;
      object-position: center center;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}

@media print {
  .jdm-c-hr-interactive .jdm-c-hr--popup {
    position: static;
    transform: none;
  }
  .jdm-c-hr-interactive .jdm-c-hr--popupWrapper {
    display: block;
  }
}