.hx {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  /*background: #201F41;*/
}

.hx__hex--big {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 780px;
  /*max-width: 780px;*/
  font-family:"DM Serif Display", serif;
  font-weight:400;
  font-style:normal;
  font-size: 2.5rem;
  text-align: center;
  line-height: 1.25;
  /*font-weight: 700;*/
  color: #fff;
  aspect-ratio: 1.15/1;
  background-image: url('../../../images/HEX_Cobalt.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0;
  padding: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hx--left {
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
}
.hx--right {
  position: absolute;
  right: 15%;
  top: 35%;
  transform: translateY(-50%);
}
.hx--bottom {
  position: absolute;
  right: 12%;
  bottom: 10%;
}

.hx__hex--tiny {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--rx, 0)), calc(-50% + var(--ry, 0)));
  width: 80px;
  height: 70px;
  aspect-ratio: 1.15/1;
  background-image: url('../../../images/HEX_Pink.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0;
}

.hx__hex--tiny--white {
  background-image: url('../../../images/HEX_White.svg') !important;
  color: black !important;
}
.hx__hex--med {
  width: 220px;
  height: 200px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  padding: 30px;

  aspect-ratio: 1.15/1;
  background-image: url('../../../images/HEX_Pink.svg');
  background-size: 100%;
  background-repeat: no-repeat;
}

@media (max-width: 1200px) {
  .hx__hex--big {
    width: 100vw !important;
    max-width: 400px !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    font-size: 20px;
  }

  .hx__hex--tiny {
    display: none !important;
  }

  .hx__hex--med {
    position: absolute;
    bottom: 5%;
    top: auto;
    transform: translateX(-50%);
  }
  .hx--bottom {
    right: 10%;
  }
  .hx--right {
    left: 25%;
  }

  .hx--left {
    left: 50%;
    top: 90px;
  }
}

@media (max-width: 650px) {
  .hx--bottom {
    right: -18% !important;
    bottom:10% !important;
  }

  .hx--right {
    left: 18% !important;
    bottom:10% !important;
  }

  .hx__hex--big {
    max-width: 600px !important;
  }
  
  .hx--bottom,
  .hx--right {
      scale: 0.80 !important
  }
}

@media (max-width: 400px) {
  .hx--bottom {
    right: -24% !important;
  }
}