:root{
  --yg-surface:#ffffff;
  --yg-line:#e2e8f0;
  --yg-ink:#1f2a38;
  --yg-ink-2:#575760;
  --yg-orange:#ff5500;
  --yg-body:#222222;
  --yg-radius:14px;
  --yg-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --yg-shadow-lg:0 8px 28px rgba(16,24,40,.10);
}

.yg-related{
  background:var(--yg-surface);
  border:1px solid var(--yg-line);
  border-radius:var(--yg-radius);
  box-shadow:var(--yg-shadow);
  padding:20px;
  margin:16px 0;
  scroll-margin-top:72px;
}
.yg-related h2{margin:0 0 .5em;}
.yg-related__intro{color:var(--yg-body);margin:0 0 12px}

.yg-apps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.yg-app{
  background:var(--yg-surface);border:1px solid var(--yg-line);border-radius:14px;padding:14px;
  text-align:center;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;
  transition:transform .12s,box-shadow .12s;
}
.yg-app:hover{transform:translateY(-3px);box-shadow:var(--yg-shadow-lg)}
.yg-app__img{width:54px;height:54px;border-radius:12px;margin:0 auto 8px;object-fit:cover}
.yg-app__name{font-weight:800;font-size:14px;color:var(--yg-ink)}
.yg-app__btn{margin-top:8px;width:100%;background:linear-gradient(180deg, #39b530, #318a28);color:#fff;border-radius:8px;padding:7px;font-size:12.5px;font-weight:700}

@media (min-width:560px){
  .yg-apps{grid-template-columns:repeat(3,1fr)}
}