.shield-page {
  background:
    radial-gradient(circle at 88% 14%, rgba(236, 180, 67, 0.18), transparent 18%),
    radial-gradient(circle at 13% 55%, rgba(174, 18, 30, 0.16), transparent 27%),
    linear-gradient(146deg, #162b36 0%, #0b1922 50%, #071017 100%);
}

.shield-page::before,
.shield-page::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.shield-page::before {
  left: -35%;
  bottom: 14%;
  width: 142%;
  height: 31%;
  border: 1px solid rgba(243, 203, 101, 0.25);
  border-radius: 50%;
  box-shadow:
    0 18px 0 15px rgba(239, 191, 76, 0.026),
    0 38px 0 35px rgba(239, 191, 76, 0.018);
  transform: rotate(7deg);
}

.shield-page::after {
  right: -19%;
  bottom: -2%;
  width: 83%;
  height: 31%;
  opacity: 0.9;
  background:
    linear-gradient(137deg, transparent 0 30%, rgba(222, 18, 38, 0.78) 30.5% 53%, transparent 53.5%),
    linear-gradient(137deg, transparent 0 46%, rgba(255, 205, 92, 0.58) 46.5% 47.2%, transparent 47.6%),
    linear-gradient(137deg, transparent 0 66%, rgba(255, 205, 92, 0.4) 66.4% 67%, transparent 67.4%);
}

.shield-page__aura {
  top: -39vmax;
  right: -29vmax;
  width: 76vmax;
  height: 76vmax;
  opacity: 0.8;
}

.shield-page__rays {
  right: -15%;
  bottom: 4%;
  width: 70%;
  height: 128px;
  opacity: 0.5;
  transform: skewY(-18deg);
}

.shield-page__image {
  height: clamp(190px, 28svh, 244px);
  margin-top: 20px;
  border-color: rgba(252, 226, 155, 0.52);
  outline: 1px solid rgba(205, 23, 39, 0.68);
  outline-offset: 5px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.46), 11px 11px 0 rgba(150, 11, 24, 0.22);
}

.shield-page__image::before {
  background:
    linear-gradient(90deg, rgba(7, 17, 23, 0.66), transparent 32% 72%, rgba(7, 17, 23, 0.32)),
    linear-gradient(0deg, rgba(6, 14, 20, 0.28), transparent 42%);
}

.shield-page__image::after {
  background:
    linear-gradient(126deg, transparent 0 67%, rgba(201, 14, 31, 0.38) 67.2% 79%, transparent 79.2%),
    linear-gradient(135deg, rgba(255, 238, 181, 0.12), transparent 28% 70%, rgba(184, 8, 25, 0.34));
}

.shield-page__image img {
  object-position: center 52%;
  filter: grayscale(1) contrast(1.24) brightness(0.83);
}

.shield-page__content {
  margin-top: 31px;
  padding-left: 20px;
  border-left: 1px solid rgba(246, 210, 113, 0.4);
}

.shield-page__content::before {
  position: absolute;
  top: 4px;
  left: -3px;
  width: 5px;
  height: 42px;
  content: "";
  background: #c80a1f;
  box-shadow: 0 9px 23px rgba(200, 10, 31, 0.55);
}

.shield-page__kicker {
  margin-bottom: 12px;
  color: #f1cf78;
  font-size: clamp(15px, 4.1vw, 18px);
  line-height: 1.4;
}

.shield-page h2 {
  margin-bottom: 18px;
  font-size: clamp(35px, 9.3vw, 49px);
  line-height: 1.14;
  letter-spacing: 0.12em;
}

.shield-page__fact {
  gap: 6px;
  margin-top: 0;
  padding: 14px 16px 14px 0;
  border-top: 1px solid rgba(246, 210, 113, 0.32);
  border-bottom: 1px solid rgba(246, 210, 113, 0.16);
  background: linear-gradient(90deg, rgba(184, 8, 25, 0.19), transparent 88%);
}

.shield-page__fact b {
  color: #f03d4e;
  font-size: 15px;
}

.shield-page__fact span {
  max-width: 280px;
  color: rgba(250, 239, 210, 0.86);
  font-size: 13px;
}

.shield-page__footer {
  padding-top: 16px;
}

@media (max-height: 720px) {
  .shield-page__image { height: 178px; }
  .shield-page__content { margin-top: 23px; }
  .shield-page h2 { font-size: clamp(31px, 8.6vw, 44px); }
  .shield-page__fact { padding-top: 10px; padding-bottom: 10px; }
}