.p-section-title-page {
  position: relative;
}

.p-section-title-page__picture {
  /* height: 15rem; */
  aspect-ratio: 2048 / 777;
  position: relative;
  z-index: 10;
}

.p-section-title-page__size-small .p-section-title-page__picture {
  height: 10rem;
  aspect-ratio: unset;
}

.p-section-title-page__content {
  position: absolute;
  z-index: 20;
  inset: auto 0 0 0;
  background-color: var(--v-color__5--transparent--alt2);
  color: var(--v-color__2);
  padding: 1rem 0;
}

.p-section-title-page__content-title {
  margin: 0;
  font-weight: var(--v-font-weight__default);
  font-size: 1.5rem;
}

.p-section-title-page .p-widget-breadcrumbs a:hover {
  border-bottom-color: var(--v-color__2);
  text-decoration: none;
}

@media (min-width: 700px) {
  .p-section-title-page__size-small .p-section-title-page__picture {
    height: 15rem;
  }
}

@media (min-width: 1000px) {
  .p-section-title-page__picture {
    /*
    height: 50vh;
    max-height: 25rem;
    */
  }

  .p-section-title-page__content-title {
    font-size: 3rem;
  }

  .p-section-title-page .p-widget-breadcrumbs {
    font-size: 130%;
  }
}

@media (min-width: 1200px) {
  .p-section-title-page__picture {
    height: calc( 100vh - var(--vp-header__height-total) );
    aspect-ratio: unset;
  }

  .p-section-title-page__size-small .p-section-title-page__picture {
    height: 22rem;
  }
}

@media (min-width: 1500px) {
  .p-section-title-page__content-title {
    font-size: 4rem;
  }

  .p-section-title-page .p-widget-breadcrumbs {
    font-size: 150%;
  }
}

@media (min-width: 2000px) {
  .p-section-title-page__picture {
    height: auto;
    aspect-ratio: 2048 / 777;
  }
}

@media (min-width: 2500px) {
  .p-section-title-page__content {
    padding: 2rem 0;
  }

  .p-section-title-page__content-title {
    font-size: 5rem;
  }

  .p-section-title-page__picture {
    /*
    height: 30rem;
    max-height: none;
    */
  }
}