.com-page-header {
  /* Typography */
  --com-page-header-title-font-size    : 64px;
  --com-page-header-subtitle-font-size : 26px;
  /* Colors */
  --color-com-page-header-text         : hsl(0 0% 100% / 1);
  --color-com-page-header-bg           : hsl(0 0% 0% / 0.7);
}

.com-page-header {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 100%; margin: 0 auto 80px; padding: 180px 0;
  text-align: center;
  overflow: hidden;
  color: var(--color-com-page-header-text);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: hsl(0 0% 0% / 1);
}

.com-page-header.align-left  { align-items: flex-start; text-align: left; }
.com-page-header.align-right { align-items: flex-end;   text-align: right; }

.com-page-header-title, .com-page-header-subtitle {
  position: relative;
  /* background: var(--color-com-page-header-bg); */
  /* backdrop-filter: blur(10px); */
}

.com-page-header-title {
  padding: 40px 60px;
  margin-bottom: 60px;
  font-size: var(--com-page-header-title-font-size);
  line-height: calc(var(--com-page-header-title-font-size) * 1.3);
  font-weight: bold;
}

.com-page-header-subtitle {
  padding: 40px;
  font-size: var(--com-page-header-subtitle-font-size);
}

.com-page-header-title.has-text-shadow .com-page-header-text,
.com-page-header-subtitle.has-text-shadow .com-page-header-text {
  text-shadow: 0 2px 12px hsl(0 0% 0% / 0.85), 0 0 40px hsl(0 0% 0% / 0.5);
}

@media (width <= 800px) {
  .com-page-header-title, .com-page-header-subtitle {
    max-width: 96%; padding-left: 0; padding-right: 0;
  }
}