.grafika-obal .box-container .mapa-podklad-obr {
    position: relative;
    margin-bottom: var(--spacing-m);
}
.grafika-obal .box-container  .mapa-img {
    position: relative;
    width: 100%;
}

.grafika-obal .box-container .mapa-podklad-obr .mapa-svg {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: calc(50% + 4px);
    transform: translateX(-50%);
    width: calc(100% - 12px);
}

.grafika-obal .box-container .mapa-podklad-obr .mapa-svg path {
    fill: transparent;
    cursor: pointer;
    stroke: var(--brand-50);
    transition: fill 0.2s ease, stroke 0.2s ease;
    opacity: 0.35;
}

.grafika-obal .box-container .mapa-podklad-obr .mapa-svg path:hover,
.grafika-obal .box-container .mapa-podklad-obr .mapa-svg path.selected {
    fill: var(--brand-600);
}

.grafika-obal .box-container .mapa-text-content {
    padding: var(--spacing-l);
    margin-bottom: var(--spacing-xl);
    background-color: var(--brand-blue-600);
    border-radius: var(--radius-xs);
    font-size: 1rem;
    line-height: 1.5;
}

.grafika-obal .box-container .mapa-text-content h4 {
    margin: 0;
    margin-bottom: var(--spacing-s);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-50);
}

.grafika-obal .box-container .mapa-text-content p {
    margin: 0;
    color: var(--brand-50);
    font-size: 1rem;
}

@media screen and (max-width: 600px) {
    .grafika-obal .box-container .mapa-podklad-obr .mapa-svg {
        bottom: 7px;
        left: calc(50% + 2px);
        width: calc(100% - 7px);
    }
}