header{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header{
    padding: var(--space-4);
    background-color: var(--white200);
    border-radius: var(--br-top);
}

.header-map{
    width: 100%;
    height: 320px;
    background-color: var(--white100);
    overflow: hidden;
}


@media screen and (min-width: 768px) {
    .header-map{
        width: calc(100% - 390px);
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 0;
        left: 390px;
    }
}

@media screen and (max-width: 375px) {
    .header-map{
        height: 240px;
    }
    
}

@media screen and (max-height: 580px) {
    .header-map{
        display: none;
    }
}