body[class*="template_events"] { background: var(--yellow-lightest); }
ul.directory {
    padding-bottom: var(--gap);
}

ul.directory>li {
    width: calc(50% - var(--gutter));
    margin: calc(var(--gutter) / 2);
}



#directory_container.mapopen{ display: flex; justify-content: space-between; }
div#map {visibility: hidden;
    position: fixed; top: -100vh }

.mapopen div#map {   background: var(--green);
    height: 100vw; min-height: 500px;
    top:0;
    visibility: visible;
}

@media all and (max-width: 599.98px) {
    div#map {
        order:-1;
        margin-bottom: 32px
    }

    #directory_container.mapopen {
        flex-direction: column
    }

    #directory_container.mapopen>div {
        width: 100%
    }

}
@media all and (min-width:600px) {
    #directory_container.mapopen{   justify-content: space-between; }
    #directory_container.mapopen > div { width: calc(50% - (var(--gap) / 2)); width: 50%; }


    .mapopen div#map {
        height: 100vh;
        position: sticky !important;
        margin-left: auto;
    }
}


#directory_container div#listings {
    max-width: calc(var(--wrapper-max) / 2);
    border-left: var(--wrapper-margin) solid transparent;
    border-right: var(--wrapper-margin) solid transparent;
    width: 100%
}
@media all and (max-width: 599.98px) {
    ul.directory>li {
        width: calc(100% - var(--gutter));
        margin: calc(var(--gutter) / 2);
    }

}
@media all and (min-width: 600px) {
    #directory_container.mapopen ul.directory>li {
        width: calc(100% - var(--gutter));

    }
}
@media screen and (min-width: 900px) {
    #directory_container.mapopen > div{
        display: flex;
    }
    #directory_container.mapopen div#listings{
        margin-left: auto;
    }
    #directory_container:not(.mapopen) div#listings{
        max-width: var(--wrapper-max); margin: 0 auto;
    }
    #directory_container.mapopen div#listings {

        border-right-width: var(--gap);
        
    }

    ul.directory>li {
        width: calc(33.333% - var(--gutter));

    }
    ul.directory.featured>li {
        width: calc(50% - var(--gutter));

    }
    #directory_container.mapopen ul.directory>li {
        width: calc(100% - var(--gutter));

    }
}
@media screen and (min-width: 1200px) {


    ul.directory>li,
    ul.directory.featured>li {
        width: calc(25% - var(--gutter));

    }

    #directory_container.mapopen ul.directory>li {
        width: calc(50% - var(--gutter));

    }
}