/* Shared Page Title component. */
.page-title {
  width: min(var(--htc-container), calc(100% - (var(--htc-gutter) * 2)));
  height: 400px;
  margin: var(--htc-space-6) auto 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--htc-radius-md);
  background: #dfe6ee;
  font-family: "Montserrat", Arial, sans-serif;
}

.page-title__image,
.page-title__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-title__image { object-fit: cover; }

.page-title__overlay {
  background: linear-gradient(107.62deg, rgba(8,22,43,.5) .32%, rgba(8,22,43,0) 97.9%);
  pointer-events: none;
}

.page-title__heading {
  position: absolute;
  z-index: 2;
  top: var(--htc-space-10);
  left: var(--htc-space-10);
  margin: 0;
  color: var(--htc-white);
  font-size: var(--htc-display-size);
  line-height: 1.2;
  font-weight: 600;
}

@media (max-width: 900px) {
  .page-title { height: 320px; }
  .page-title__heading {
    top: 56px;
    left: var(--htc-space-8);
    font-size: 42px;
  }
}

@media (max-width: 600px) {
  .page-title {
    width: calc(100% - 28px);
    height: 230px;
    margin-top: var(--htc-space-3);
    border-radius: 10px;
  }
  .page-title__heading {
    top: 34px;
    left: var(--htc-space-5);
    font-size: 34px;
  }
}