.block-openculturas-custom-page-title {
  margin-bottom: $grid-gutter;

  .page-title {
    margin-bottom: .5rem;
  }

  .sub-type {
    top: 1rem;
  }

  .page-subtitle {
    font-family: $font-base;
    font-size: $font-size-l;
    margin-top: 0;
  }

  .field {
    margin: 0;
  }
}

.custom-page-title--with-image {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  margin-top: 0rem;
  //margin-bottom: 2rem;

  .field--name-field-portrait {
    @include profile-circle;
    position: relative;
    top: $grid-gutter;
    height: 6rem;
    width: 6rem;
    min-width: 6rem;
    margin: 0 0 $grid-gutter;
    border-width: 2px;
  }

  @include breakpoint(m) {
    margin-top: 1rem;
    flex-flow: row nowrap;
    align-items: normal;
    text-align: left;
    .field--name-field-portrait {
      position: relative;
      margin-right: $grid-gutter;
    }
  }

}

// Firefox does not support has-selector by default.
// See option below
.hero-intro:has(img) + main .custom-page-title--with-image .field--name-field-portrait {
  top: -3rem;
  margin-bottom: -3rem;

  @include breakpoint(m) {
    top: $grid-gutter;
    margin-bottom: $grid-gutter;
  }
}

// Portrait can overlap header image if you always have one
// (otherwise overlaps crumbtrail in small breakpoint)

// .custom-page-title--with-image {
//   .field--name-field-portrait {
//     top: -3rem;
//     margin-bottom: -3rem;
//     @include breakpoint (m) {
//       margin-right: $grid-gutter;
//       top: $grid-gutter;
//       margin-bottom: $grid-gutter;
//     }
//   }
// }
