.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 55%, rgba(36, 107, 255, .1));
}

.image-grid {
  opacity: .88;
}

.image-grid div {
  box-shadow: 0 20px 45px rgba(0, 0, 0, .7);
}

.image-grid img {
  filter: saturate(1.02) contrast(1.05) brightness(.86);
}

.hero-copy {
  padding-bottom: 95px;
}

.social-actions {
  display: flex;
  gap: 8px;
  margin-top: 35px;
}

.social {
  width: 175px;
  padding: 13px 14px;
  position: relative;
  text-decoration: none;
  border: 1px solid rgba(114, 145, 194, .22);
  border-radius: 9px;
  background: rgba(7, 11, 18, .75);
  backdrop-filter: blur(12px);
  transition: .2s ease;
}

.social:hover {
  transform: translateY(-3px);
  border-color: rgba(116, 167, 255, .65);
  background: rgba(36, 107, 255, .16);
}

.social b,
.social small {
  display: block;
}

.social b {
  font-size: 10px;
  letter-spacing: 1.3px;
}

.social small {
  margin-top: 4px;
  color: #6f809a;
  font-size: 7px;
  letter-spacing: 1px;
}

.social > span {
  position: absolute;
  right: 13px;
  top: 18px;
  color: #8db4ff;
  font-size: 13px;
}

.social.discord {
  border-color: rgba(88, 101, 242, .45);
  background: linear-gradient(145deg, rgba(88, 101, 242, .2), rgba(7, 11, 18, .8));
}

.social.tiktok {
  border-color: rgba(255, 255, 255, .2);
}

.social.connect {
  border-color: rgba(36, 107, 255, .58);
  background: linear-gradient(145deg, rgba(36, 107, 255, .25), rgba(7, 11, 18, .8));
}

.gallery-section {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto 120px;
}

.gallery-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 20px 0 42px;
}

.gallery-title h2 {
  margin-top: 12px;
  font-size: 50px;
  line-height: .95;
  letter-spacing: -.04em;
}

.gallery-title h2 span {
  color: #74a7ff;
}

.gallery-title p {
  width: 400px;
  color: #8593aa;
  font-size: 12px;
  line-height: 1.8;
}

.gallery-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 9px;
}

.gallery-wall figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(105, 143, 207, .25);
  border-radius: 11px;
  background: #0a0e16;
}

.gallery-wall figure.wide {
  grid-column: span 2;
}

.gallery-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.05) brightness(.82);
  transition: transform .6s ease, filter .3s ease;
}

.gallery-wall figure:hover img {
  transform: scale(1.055);
  filter: saturate(1.1) contrast(1.08) brightness(.96);
}

.gallery-wall figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 58%, rgba(3, 5, 10, .9));
}

.gallery-wall figcaption {
  position: absolute;
  z-index: 2;
  left: 17px;
  bottom: 15px;
  color: #dce8ff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.join-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 30px;
  border: 1px solid rgba(66, 120, 223, .42);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(36, 107, 255, .16), rgba(7, 10, 16, .94));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.join-banner img {
  width: 70px;
  filter: drop-shadow(0 0 20px rgba(36, 107, 255, .5));
}

.join-banner div {
  flex: 1;
}

.join-banner small {
  color: #82aafa;
  font-size: 7px;
  letter-spacing: 2px;
}

.join-banner h2 {
  margin-top: 7px;
  font-size: 27px;
}

@media (max-width: 800px) {
  .home-hero { min-height: 820px; }
  .hero-copy { padding-bottom: 20px; }
  .social-actions { flex-wrap: wrap; }
  .social { width: calc(50% - 4px); }
  .gallery-title { align-items: flex-start; flex-direction: column; gap: 18px; }
  .gallery-title p { width: auto; }
  .gallery-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .join-banner { align-items: flex-start; flex-wrap: wrap; }
  .join-banner div { flex-basis: calc(100% - 100px); }
}

@media (max-width: 520px) {
  .actions .button, .actions .ghost { flex: 1; }
  .social { width: 100%; }
  .gallery-section { width: calc(100% - 30px); }
  .gallery-title h2 { font-size: 39px; }
  .gallery-wall { grid-template-columns: 1fr; }
  .gallery-wall figure.wide { grid-column: span 1; }
  .join-banner img { width: 55px; }
  .join-banner .ghost, .join-banner .button { flex: 1; }
}