:root {
  --detail-hero-height: clamp(220px,25vh,300px);
  --detail-hero-width: min(1540px,calc(100% - 100px));
  --detail-mark-width: 250px;
  --detail-mark-height: 118px;
  --detail-mark-outer: 104px;
  --detail-mark-inner: 72px;
}

.page-intro,
.team-hero,
.page-hero {
  height: var(--detail-hero-height);
}

.intro-inner,
.hero-inner {
  width: var(--detail-hero-width);
  height: 100%;
  margin: 0 auto;
  padding-bottom: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.intro-mark,
.hero-sign,
.hero-emblem {
  width: var(--detail-mark-width);
  height: var(--detail-mark-height);
  display: grid;
  place-items: center;
  position: relative;
  left: -15px;
  top: -5px;
  transform-origin: left top;
  scale: 1.24721;
  color: #fff;
}

.intro-mark::before,
.intro-mark::after,
.hero-sign::before,
.hero-sign::after,
.hero-emblem::before,
.hero-emblem::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(79,222,244,.24);
  transform: rotate(45deg);
}

.intro-mark::before,
.hero-sign::before,
.hero-emblem::before {
  width: var(--detail-mark-outer);
  height: var(--detail-mark-outer);
}

.intro-mark::after,
.hero-sign::after,
.hero-emblem::after {
  width: var(--detail-mark-inner);
  height: var(--detail-mark-inner);
  border-color: rgba(79,222,244,.38);
  box-shadow: 0 0 42px rgba(17,189,221,.14);
}

.intro-mark strong,
.hero-sign strong,
.hero-emblem strong {
  font: 700 32px/1 Arial,sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(65,222,244,.42);
}

.intro-mark strong,
.hero-sign strong,
.hero-emblem strong {
  display: inline-block;
  position: relative;
  z-index: 1;
  min-width: 56px;
  padding: 10px 8px;
  text-align: center;
  cursor: move;
}

@media (min-width:1180px) and (max-height:760px) {
  .page-intro,
  .team-hero,
  .page-hero {
    height: 190px;
  }

  .intro-inner,
  .hero-inner {
    padding-bottom: 36px;
  }

  .intro-mark,
  .hero-sign,
  .hero-emblem {
    transform: scale(.78);
  }
}