* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container-verder {
    padding: 3rem 5rem;
    display: flex;
    justify-content: center;
    width:100%;
}

.verder-box-container {
    padding: 1rem;
    overflow-x: auto;
    background: #EBDFD1;
    display: flex;
    flex-direction: row;
}

.vender-box {
    flex-grow: 0;
    flex-shrink: 0;
    height: 8rem;
    width: 8rem;
    margin: 0 5px;
    top: 5px;
}

.box-img {
    width: 100%;
    height: 100%;
}

/* content */
.verder-select-container {
    display: grid;
    grid-template-columns: minmax(200px,30%) 1fr;
    margin: 1rem;
    & > *,*,*,*,*{
                     min-width:0;
    }
    @media only screen and (width < 530px) {
        grid-template-columns: 1fr;
        .location-select-container {
            order: 2;
        }

        .show-location-map-selected-container {
            order: 1;
        }
    }
}

.location-select-container {
    padding: 1rem;
    display: grid;
    grid-template-rows: 6rem auto;
}

.location-select-box {
    background: #EBDFD1;
    display: grid;
    grid-template-rows: 2rem 2rem;
    gap: 1rem;
    & > select

{
    height: 100%;
    margin: .5rem;
    padding: 5px;
}

}

.location-selected-list {
    max-height: 500px;
    overflow-y: auto;
    background: white;
    min-width:0;
}

.location-detail {
    display: grid;
    grid-template-columns: 1fr 4rem;
    padding: 1rem;
    border-bottom: 2px solid gray;
    & > *,*,*,*

{
    word-wrap: break-word;
    min-width: 0;
}

}

.link-location, .web-location {
    color: #c67144;
    font-weight: 500;
    place-self: end;
    text-decoration: none;
}

.show-location-map-selected-container {
    padding: 1rem;
    container-type: inline-size;

    @container (width<= 400px) {
        .selected-location {
            grid-template-columns: 1fr;
        }
    }
}

.selected-location {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    & > img

{
    width: 100%;
}

& > div {
    background: white;
    padding: 1rem;
}
}