.com-page-header {
  /* Typography */
  --com-page-header-title-font-size         : 64px;
  --com-page-header-description-max-width   : 1000px;
  --com-page-header-description-font-size   : 26px;
  --com-page-header-description-line-height : 2.2rem;
  /* Colors */
  --color-com-page-header-text   : hsl(0 0% 100% / 1);
  --color-com-page-header-bg     : hsl(0 0% 0% / 0.7);
  --color-com-page-header-shadow : hsl(269deg 30% 10% / 1);
}

.com-page-header {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 100%;
  /* max-width: max(var(--content-max-width), 84%); */
  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%;
}

.com-page-header-shadow {
  position: absolute; z-index: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(50% 50%, var(--color-com-page-header-shadow), hsl(0 0% 0% / 0));
  transform: scale(2.5, 3.5);
}

.com-page-header-text { position: relative; z-index: 10; }

.com-page-header-title, .com-page-header-description {
  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-description {
  padding: 40px;
  max-width: var(--com-page-header-description-max-width);
  font-size: var(--com-page-header-description-font-size);
  line-height: var(--com-page-header-description-line-height);
}

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