.content {
    display: flex;
}

ul {
    padding-left: 15px;
}

#map_container {
    width: 800px;
    height: 500px;
}

#right-side {
    max-width: 500px;
    margin: 0 30px;
}

#custom-select {
    margin: 40px;

    select {
        background-color: transparent;
        padding: 5px;
        margin: 0;
        width: 100%;
        font-family: inherit;
        font-size: inherit;
        cursor: inherit;
        line-height: inherit;

        z-index: 1;

        outline: none;
    }

    .select {
        display: grid;
        grid-template-areas: "select";
        align-items: center;
        position: relative;

        min-width: 15ch;
        max-width: 30ch;

        border: 1px solid var(--select-border);
        border-radius: 0.25em;
        padding: 0.25em 0.5em 0.25em 0;

        /* font-size: 1.25rem; */
        cursor: pointer;
        line-height: 1.1;

        background-color: #ffffff;
        background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

        select,
        &::after {
            grid-area: select;
        }

        &:not(.select--multiple)::after {
            content: "";
            justify-self: end;
            width: 0.8em;
            height: 0.5em;
            clip-path: polygon(100% 0%, 0 0%, 50% 100%);
        }
    }

    select:focus + .focus {
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border: 2px solid var(--select-focus);
        border-radius: inherit;
    }

    label {
        font-size: 1.125rem;
        font-weight: 500;
    }

    .select + label {
        margin-top: 2rem;
    }
}

@media (max-width: 940px) {
    #map_container {
        width: 100%;
        height: 500px;
    }

    .content {
        display: block;
    }

    #right-side {
        max-width: unset;
    }

    #custom-select {
        margin: 40px 20px;
    }
}