@media (min-width: 901px) {
  .digital-roadmap__map {
    position: relative;
    display: block;
    width: min(100%, 72rem);
    height: clamp(48rem, 62vw, 56rem);
    margin-inline: auto;
  }

  .digital-roadmap__map::before,
  .digital-roadmap__map::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(55vw, 49rem);
    height: min(55vw, 49rem);
    border: 1px solid rgba(139, 99, 35, 0.23);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
  }

  .digital-roadmap__map::after {
    width: min(41vw, 36rem);
    height: min(41vw, 36rem);
    border-style: dashed;
    border-color: rgba(139, 99, 35, 0.17);
  }

  .digital-roadmap__node {
    position: absolute;
    z-index: 2;
    width: clamp(14rem, 19vw, 18rem);
    min-height: 9.5rem;
    backdrop-filter: blur(12px);
  }

  .digital-roadmap__node::before {
    content: "";
    position: absolute;
    width: 0.48rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #b88a43;
    box-shadow: 0 0 1rem rgba(184, 138, 67, 0.75);
  }

  .digital-roadmap__node--web {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .digital-roadmap__node--search {
    top: 18%;
    right: 3%;
  }

  .digital-roadmap__node--content {
    right: 3%;
    bottom: 18%;
  }

  .digital-roadmap__node--social {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .digital-roadmap__node--campaign {
    bottom: 18%;
    left: 3%;
  }

  .digital-roadmap__node--care {
    top: 18%;
    left: 3%;
  }

  .digital-roadmap__node--web::before { bottom: -1.25rem; left: calc(50% - 0.24rem); }
  .digital-roadmap__node--search::before,
  .digital-roadmap__node--content::before { left: -1.25rem; top: calc(50% - 0.24rem); }
  .digital-roadmap__node--social::before { top: -1.25rem; left: calc(50% - 0.24rem); }
  .digital-roadmap__node--campaign::before,
  .digital-roadmap__node--care::before { right: -1.25rem; top: calc(50% - 0.24rem); }

  .digital-roadmap__node--web:hover,
  .digital-roadmap__node--social:hover {
    transform: translateX(-50%) translateY(-0.35rem);
  }

  .digital-roadmap__node--search:hover,
  .digital-roadmap__node--content:hover,
  .digital-roadmap__node--campaign:hover,
  .digital-roadmap__node--care:hover {
    transform: translateY(-0.35rem);
  }

  .digital-roadmap__center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: clamp(20rem, 29vw, 27rem);
    min-height: 0;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 900px) {
  .digital-roadmap__map {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "web social"
      "search content"
      "campaign care";
  }
}

@media (max-width: 560px) {
  .digital-roadmap__map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "web"
      "social"
      "search"
      "content"
      "campaign"
      "care";
  }
}