.en-strategy-diagram {
  --strategy-accent: #ef2d91;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 760px);
  min-height: 460px;
  margin: 36px auto;
  padding: 48px;
  overflow: hidden;
  border-radius: 32px;
  color: #fff;
  background: radial-gradient(circle, #401742 0 21%, #261b33 21% 44%, #1b1928 44% 100%);
  isolation: isolate;
}

.en-strategy-diagram__outer,
.en-strategy-diagram__middle {
  position: absolute;
  inset: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: space-between;
  justify-items: center;
  gap: 12px 8px;
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 30px;
}

.en-strategy-diagram__outer span,
.en-strategy-diagram__middle span {
  max-width: 130px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgb(24 21 34 / 88%);
  font: 600 14px/1.25 Arial, sans-serif;
  text-align: center;
}

.en-strategy-diagram__middle {
  inset: 22%;
  display: block;
  border-radius: 50%;
  border-color: rgb(239 45 145 / 60%);
}

.en-strategy-diagram__middle span {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1px solid rgb(239 45 145 / 65%);
}

.en-strategy-diagram__middle span:nth-child(1) { top: 4%; left: 50%; }
.en-strategy-diagram__middle span:nth-child(2) { top: 50%; left: 1%; }
.en-strategy-diagram__middle span:nth-child(3) { top: 50%; left: 99%; }
.en-strategy-diagram__middle span:nth-child(4) { top: 96%; left: 22%; }
.en-strategy-diagram__middle span:nth-child(5) { top: 96%; left: 78%; }

.en-strategy-diagram__center {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--strategy-accent);
  font: 700 18px/1.2 Arial, sans-serif;
  text-align: center;
}

@media (max-width: 600px) {
  .en-strategy-diagram {
    min-height: 390px;
    margin: 24px auto;
    padding: 18px;
    border-radius: 22px;
  }

  .en-strategy-diagram__outer,
  .en-strategy-diagram__middle {
    inset: 12px 12px auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-content: space-around;
    gap: 8px 4px;
    padding: 12px 6px;
    border-radius: 18px;
    height: 112px;
  }

  .en-strategy-diagram__middle {
    inset: auto 12px 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    gap: 4px;
    height: 130px;
    border-radius: 18px;
  }

  .en-strategy-diagram__outer span,
  .en-strategy-diagram__middle span {
    max-width: 86px;
    padding: 5px 6px;
    font-size: 10px;
  }

  .en-strategy-diagram__middle span:nth-child(1) { top: 0; left: 50%; }
  .en-strategy-diagram__middle span:nth-child(n) {
    position: static;
    max-width: 122px;
    transform: none;
  }

  .en-strategy-diagram__middle span:nth-child(5) {
    grid-column: 1 / -1;
  }

  .en-strategy-diagram__center {
    width: 82px;
    font-size: 14px;
  }
}