.culturea-map-frame{
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 450px;
  margin: 30px auto;
  overflow: hidden;
  border: 4px solid var(--c-text-main);
  background: var(--c-bg-primary);
  touch-action: none;
}

.culturea-map-frame svg{
  display: block;
  transform: translate(-60px, 20px);
}

.zoom-controls{
  position: absolute !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.zoom-controls button{
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid var(--c-accent-1) !important;
  background: var(--c-bg-primary) !important;
  color: var(--c-accent-1) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all .25s ease !important;
}

.zoom-controls button:hover{
  background: var(--c-accent-1) !important;
  color: var(--c-bg-primary) !important;
  border-color: var(--c-accent-1) !important;
}

@media (max-width: 768px){
  .zoom-controls{
    display: none !important;
  }
  
  .culturea-map-frame{
    height: 300px;
    margin-top: 5px;
  }
  
  .culturea-map-frame svg{
    transform: translate(-350px, 0px);
  }
}