$o-hero-bp1: 830;

.o-hero {
  position: relative;
}


.o-hero__figure {
  /*
   * We need "overflow: hidden" here because we want to
   * limit the height. We can't set it on the root block element,
   * because there can be an ornament sticking out the bottom.
  */
  max-height: 480px;
  overflow: hidden;
}


.o-hero__img {
  width: 100%;
  min-height: 220px;
  object-fit: cover;
}


@include mq($o-hero-bp1) {
  .o-hero--has-ornament {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 72px;
      height: 120px;
      background-image: url(/img/ornaments/ornament-1.svg);
      transform: translateY(50%);
    }
  }
}