.kps-coverage-map-frame {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 25, 54, .1);
  border-radius: 28px;
  background: #fffdf9;
  box-shadow: 0 24px 70px rgba(32, 25, 54, .1);
}

.kps-coverage-map-scroll {
  width: 100%;
  overflow: hidden;
  scrollbar-color: #ff7142 #fff1e9;
  scrollbar-width: thin;
}

.kps-coverage-map-scroll:focus-visible {
  outline: 3px solid rgba(255, 113, 66, .48);
  outline-offset: -3px;
}

.kps-coverage-map-frame picture,
.kps-coverage-map-frame img {
  display: block;
  width: 100%;
}

.kps-coverage-map-frame img {
  height: auto;
  aspect-ratio: 1920 / 888;
  object-fit: cover;
}

.kps-coverage-map-caption {
  display: none;
}

@media (max-width: 760px) {
  .kps-coverage-map-frame {
    border-radius: 20px;
    box-shadow: 0 18px 46px rgba(32, 25, 54, .1);
  }

  .kps-coverage-map-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .kps-coverage-map-frame picture,
  .kps-coverage-map-frame img {
    width: 920px;
    max-width: none;
    scroll-snap-align: start;
  }

  .kps-coverage-map-caption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(32, 25, 54, .08);
    border-radius: 11px;
    background: rgba(255, 253, 249, .94);
    box-shadow: 0 8px 24px rgba(32, 25, 54, .1);
    color: #201936;
    font: 700 10px/1.2 Inter, Arial, sans-serif;
    letter-spacing: .045em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .kps-coverage-map-caption span {
    color: #ff7142;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kps-coverage-map-scroll {
    scroll-behavior: auto;
  }
}
