.map-points-block {
  overflow: hidden;
  margin-bottom: var(--section-gap, 120px);

  & * {
    font-family: 'Mulish', sans-serif !important;
  }

  & .container:has(.map-points__buttons) {
    margin-top: 52px;
  }
}

.map-points__header {
  display: flex;
  row-gap: 28px;
  flex-direction: column;
  margin-bottom: 36px;
  max-width: 740px;

  @media screen and (max-width: 1024px) {
    row-gap: 16px;
    margin-bottom: 30px;
  }

  & .map-points__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 52px;
    color: #1F4FCE;

    @media screen and (max-width: 1024px) {
      font-size: 28px;
      line-height: 35px;
    }
    @media screen and (max-width: 640px) {
      font-size: 22px;
      line-height: 29px;
    }
  }
  & .map-points__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #1B1B1B;
  }
}

.map-points-container {
  width: 100%;
  aspect-ratio: 1440 / 672;

  @media screen and (max-width: 991px) {
    aspect-ratio: 1200 / 672;
  }
  @media screen and (max-width: 500px) {
    aspect-ratio: 1000 / 672;
  }

  & .map-balloon__content {
    white-space: pre-line;
  }
}

.map-points__buttons {
  display: flex;
  column-gap: 40px;
  align-items: center;
  justify-content: center;

  @media screen and (max-width: 640px) {
    row-gap: 24px;
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }

  & .map-points__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: max-content;
    height: 40px;
    padding: 0 30px;
    border-radius: 40px;
    position: relative;
    text-decoration: none;
    background: transparent;
    transform: translateY(0);
    transition: transform .25s;

    font-size: 16px;
    font-weight: 400;
    color: #0C3E9A;

    @media screen and (max-width: 640px) {
      width: 100%;
    }

    &:hover {
      transform: translateY(-2px);
      background-color: rgba(31, 79, 206, 0.08);;
    }
    &.map-points__button--region {
      color: white;
      background: linear-gradient(180deg, #4085D9 0%, #0C3E9A 100%);
    }
    &.map-points__button--area::after {
      content: "";
      position: absolute;
      inset: 0;
      padding: 2px;
      border-radius: inherit;
      background: linear-gradient(#4085D9, #0C3E9A);

      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;

      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask-composite: exclude;

      pointer-events: none;
    }
  }
}