.locations-display{
    margin: var(--block-margin) auto;
    width: 100%;
    max-width: var(--wide-width);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.locations-display-header{
    margin-bottom: var(--item-row-gap);
}

.locations-display-header.animate__animated{
    animation-name: fadeIn;
}

.locations-display-header > *:last-child{
    margin-bottom: 0;
}

.locations-display-main{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--item-row-gap);
    column-gap: var(--item-column-gap);
}

.locations-display-main-map{
    border: 0.1rem solid var(--accent-color);
    padding: var(--page-padding);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.locations-display-main-map-loading{
    grid-column: 1;
    grid-row: 1;
    color: var(--accent-color);
    background: var(--color-light-blue);
    display: grid;
}

.locations-display-main-map-loading svg{
    width: 15rem;
    height: auto;
}

.locations-display-main-map .map{
    width: 100%;
    height: 100%;
    min-height: 35rem;
    grid-column: 1;
    grid-row: 1;
}

.locations-display-main-map .map iframe + div{
    border: none!important;
}

.locations-display-main-list{
    height: min(calc(100vh - var(--admin-bar-height) - var(--fixed-header-height) - var(--row-gap)), 55rem);
    border-bottom: 0.1rem solid var(--accent-color);
    overflow: auto;
}

.locations-display-main-list-search{
    position: sticky;
    top: 0;
    transform: translateY(-0.1rem);
    margin-bottom: var(--page-padding);
    background: var(--background-color);
    display: flex;
    column-gap: var(--page-padding);
}

.locations-display-main-list-search :is(input, select){
    width: 100%;
    padding-top: 0.1rem!important;
}

.locations-display-main-list-search .select-container::after{
    margin-top: -0.25em;
}

.locations-display-main-list-not-found{
    display: none;
}

.locations-display-main-list .post-loop-distributor h3{
    cursor: pointer;
    transition: all 0.3s ease;
}

.locations-display-main-list .post-loop-distributor h3:hover{
    text-decoration: underline;
}

@media (min-width: 768px){
    .locations-display-main{
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-auto-flow: dense;
    }

    .locations-display-main-map{
        grid-column: 2;
    }

    .locations-display-main-list{
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
    }
}