/*
<div class="hexagon-glow-wrap">
  <div class="hexagon"></div>
  <div class="hexagon-text">III</div>
</div>
*/

/** OUTER GLOW **/
.hexagon-glow-wrap {
  display: block;
  position: relative;
  filter: drop-shadow(0 0 15px rgba(67, 201, 254, 0.8));
}

/** HEXAGON WITH OUTER GLOW **/
.hexagon {
  --b: 6px;
  --hex-h: 150px;
  height: var(--hex-h);
  aspect-ratio: cos(30deg);
  background: #43caff;
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #43caff;
  z-index: 1;

  clip-path: polygon(
    50% 0,
    -50% 50%,
    50% 100%,
    150% 50%,
    50% 0,
    50% var(--b),
    calc(100% - var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)),
    calc(100% - var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)),
    50% calc(100% - var(--b)),
    calc(var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)),
    calc(var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)),
    50% var(--b)
  );
}

/** INNER GLOW **/
.hexagon::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: transparent;
  box-shadow: 0 0 25px rgba(67, 201, 254, 0.8);
  filter: blur(10px);
  z-index: -1;
}

.hexagon-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  color: #a3e7ff;
  font-weight: 700;
  font-size: 100px;
  letter-spacing: 2px;

  text-shadow:
    0 0 5px rgba(67, 201, 254, 1),
    0 0 10px rgba(67, 201, 254, 1),
    0 0 20px rgba(67, 201, 254, 0.8),
    0 0 35px rgba(67, 201, 254, 0.6),
    0 0 50px rgba(67, 201, 254, 0.4);

  filter: drop-shadow(0 0 8px rgba(67, 201, 254, 0.8));
}

.hexagon-text img {
  object-fit: contain;
  max-width: 60%;
  max-height: 60%;
}

.hexagon-text img[src*="faction"] {
  filter: brightness(1.1);
}

.rotated-hexagon-icon {
  transform: rotate(-90deg);
}

.badges-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
}

@media (max-width: 768px) {
  .badges-row {
    gap: 20px;
    margin-bottom: 15px;
  }

  .hexagon-glow-wrap {
    transform: scale(0.65);
    transform-origin: center center;
    margin: -15px 0;
  }

  .hexagon-text img.smaller {
    width: 65px;
    height: 65px;
  }

  .hexagon-text img.bigger {
    width: 90px;
    height: 90px;
  }
}