.course-map {
  overflow: hidden;
  padding: 0;
  background: #10392f;
}

.course-map .map-copy {
  margin: 0;
  padding: 30px 32px 22px;
}

.course-journey {
  padding: 0 18px 18px;
}

.course-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: #315f4c;
}

.course-visual img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.course-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  filter: drop-shadow(0 3px 5px rgba(5, 35, 27, 0.36));
}

.course-pin b {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f9df8b;
  color: #264c3c;
  font-size: 13px;
}

.course-pin i {
  padding: 4px 7px;
  border-radius: 12px;
  background: rgba(12, 46, 39, 0.82);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.pin-tee { left: 9%; bottom: 13%; }
.pin-fairway { left: 41%; bottom: 34%; }
.pin-rough { left: 31%; top: 23%; }
.pin-water { left: 51%; top: 24%; }
.pin-bunker { right: 23%; top: 34%; }
.pin-green { right: 8%; top: 15%; }

.course-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 12px;
}

.course-legend article {
  display: flex;
  gap: 9px;
  padding: 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
}

.course-legend article > b {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #f9df8b;
  color: #264c3c;
  font-size: 11px;
}

.course-legend h4 {
  margin: 0;
  color: #fff;
  font-size: 13px;
}

.course-legend p {
  margin: 3px 0 0;
  color: #b6d0c7;
  font-size: 11px;
  line-height: 1.65;
}

@media (max-width: 850px) {
  .course-legend {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .course-map .map-copy {
    padding: 22px 20px 17px;
  }

  .course-journey {
    padding: 0 10px 10px;
  }

  .course-visual img {
    aspect-ratio: 4 / 5;
    object-position: center;
  }

  .course-pin {
    gap: 2px;
  }

  .course-pin b {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  .course-pin i {
    padding: 3px 5px;
    font-size: 9px;
  }

  .pin-tee { left: 7%; bottom: 10%; }
  .pin-fairway { left: 33%; bottom: 35%; }
  .pin-rough { left: 12%; top: 26%; }
  .pin-water { left: 48%; top: 29%; }
  .pin-bunker { right: 18%; top: 31%; }
  .pin-green { right: 4%; top: 12%; }

  .course-legend {
    grid-template-columns: 1fr;
  }
}