.emblem-card .preview img {
  max-width: 225px;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.social-links a {
  display: grid;
  gap: 2px;
  min-width: 142px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #d7eaf5;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.social-links a:hover {
  border-color: var(--cyan);
  background: rgba(54, 211, 255, 0.07);
}

.social-links span {
  color: var(--cyan);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.social-links b {
  font-size: 0.76rem;
  font-weight: 650;
}

.mascot-section {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 40%, rgba(54, 211, 255, 0.11), transparent 28rem),
    #04111e;
}

.mascot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mascot-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, #0a2237, #04101c);
}

.mascot-preview {
  display: grid;
  place-items: center;
  height: 540px;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(44, 151, 231, 0.25), transparent 48%),
    linear-gradient(145deg, #0a2033, #030d17);
}

.mascot-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.3));
}

.mascot-head .mascot-preview img {
  max-width: 430px;
}

@media (max-width: 760px) {
  .mascot-grid {
    grid-template-columns: 1fr;
  }

  .mascot-preview {
    height: 430px;
    padding: 20px;
  }

  .social-links {
    width: 100%;
  }

  .social-links a {
    flex: 1 1 180px;
  }
}