.multipic {
    position: relative;

    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

.multipic .container {
    pointer-events: none;
    
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    
    font-family: sans-serif;
    color: white;
    text-shadow: 1px 1px 1px black;
}

.multipic .container img {
    position: relative;
    max-width: 100vw;
    pointer-events: none;
}

.multipic .container .label {
    position: absolute;
    top: 5px;
    left: 5px;

    white-space: nowrap;
}

.multipic[data-count=no2] { 
    /* height: 314px;  */
    cursor: col-resize;
}
.multipic[data-count=no4] { 
    /* height: 728px;  */
    cursor: move;
}

.multipic .container:nth-child(odd) {
    border-right: 2px solid white;
}
.multipic[data-count=no4] .container:nth-child(1),
.multipic[data-count=no4] .container:nth-child(2) {
    border-bottom: 2px solid white;
}

.multipic .container::before, 
.multipic .container::after {
    display: block;
    position: absolute;
    z-index: 1;
    
    opacity: 0.6;
}
.multipic .container:nth-child(odd)::after {
    content: "\25C0";
    top: 50%;
    right: 2px;
}
.multipic .container:nth-child(even)::after {
    content: "\25B6";
    top: 50%;
    left: 2px;
}

.multipic[data-count=no4] .container:nth-child(1)::before,
.multipic[data-count=no4] .container:nth-child(2)::before {
    content: "\25B2";
    bottom: 2px;
    left: 50%;
}
.multipic[data-count=no4] .container:nth-child(3)::before,
.multipic[data-count=no4] .container:nth-child(4)::before {
    content: "\25BC";
    top: 2px;
    left: 50%;
}

.multipic .container:nth-child(even) .label {
    right: 5px;
    left: unset;
}
.multipic[data-count=no4] .container:nth-child(3) .label,
.multipic[data-count=no4] .container:nth-child(4) .label {
    top: unset;
    bottom: 5px;
}