.guide-hero {
  padding-block: 191px 64px;
  text-align: center;
}
.guide-hero::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(ellipse 290px 130px at 50% -14px, #cd6b4580, #531a1a6d 55%, transparent);
  content: '';
  pointer-events: none;
}
.guide-hero h1 {
  font-size: clamp(40px, 6.2vw, 80px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.1;
}
.guide-hero p {
  max-width: 620px;
  margin: 32px auto 0;
  color: var(--muted);
  font-size: 20px;
}
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
.guide-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 13px;
  background-color: #0b0c16;
  transition: border-color .2s, filter .2s;
}
.guide-card:hover .guide-art { border-color: #a394ad; filter: brightness(1.13); }
.guide-art > span {
  display: grid;
  width: min(70%, 290px);
  gap: 6px;
  padding: 18px;
  border: 1px solid #ffffff32;
  border-radius: 13px;
  background: #09090df0;
  box-shadow: 0 10px 44px #0009;
}
.guide-art small { color: #bbb; font-size: 11px; }
.guide-art b { font-size: clamp(20px, 4.4vw, 46px); line-height: 1.12; font-weight: 500; letter-spacing: -.055em; }
.guide-art i { color: #ff6b58; }
.guide-lines {
  height: 42px;
  margin-top: 6px;
  background: linear-gradient(#fc675e,#fc675e) 0 2px/83% 3px no-repeat,
              linear-gradient(#5b66a8,#5b66a8) 0 15px/58% 3px no-repeat,
              linear-gradient(#62626b,#62626b) 0 28px/69% 3px no-repeat;
}
.art-one { background-image: linear-gradient(132deg,#10105f,#3a91e5 18%,#91d9ec 21%,#ff6b38 22%,#05050a 25% 69%,#c64e34 70%,#f2bc94 72%,#1d63da 77%,#190e55); }
.art-two { background-image: radial-gradient(ellipse at 5% -48%,#0b0b12 44%,#ff7d46 45%,#a94a2c 48%,#fca772 55%,#ffe1bb 60%,#18a3f7 62%,#114899 67%,#080c2c 72%); }
.art-three { background-image: radial-gradient(ellipse at 96% 0,#0f1a3f,#36c2da 25%,#1253d0 40%,#140f4a 57%,#080817 72%); }
.art-four { background-image: linear-gradient(30deg,#0f0a14,#841d5a 19%,#f57c3e 35%,#ffd3a0 47%,#12164a 53%,#2554a1 70%,#11a1d3); }
.guide-card h2 { margin-top: 15px; font-size: 18px; line-height: 1.4; font-weight: 500; }
.guide-card p { margin-top: 7px; color: var(--muted); }
.guide-articles { max-width: 850px; margin-top: 110px; }
.guide-article { padding: 56px 0; border-top: 1px solid var(--line); }
.guide-article h2 { margin-top: 22px; font-size: clamp(32px,5vw,48px); }
.guide-article p { margin-top: 18px; color: #b2b2b2; font-size: 18px; }
@media (max-width: 690px) {
  .guide-hero { padding-block: 128px 42px; }
  .guide-hero p { margin-top: 20px; font-size: 17px; }
  .guide-grid { grid-template-columns: 1fr; gap: 28px; }
  .guide-articles { margin-top: 65px; }
  .guide-article { padding-block: 40px; }
  .guide-article p { font-size: 16px; }
}