svg#identity {
    width: 1200px;
}

.shutter-container {
    position: relative;
    width: var(--max-width);
    height: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--background-color);
    border: 1px solid var(--secondary-color);
    overflow: hidden;
    cursor: default;
}

.shutter-container-layer {
    height: 100%;
    pointer-events: none;
}

.shutter-container-layer:first-of-type {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.shutter-container-layer:last-of-type {
    width: 100%;
    height: calc(100% + 1px);
    position: absolute;
    top: -1px;
    left: 0;
    background-color: var(--ekotech-color);
    overflow: hidden;
    z-index: 2;
    -webkit-clip-path: inset(0 50% 0 0);
    clip-path: inset(0 50% 0 0);
}

.shutter-container-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.shutter-container-cover img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none;
}

.shutter-container-ui {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(calc(-50% + 1px), -50%);
    -ms-transform: translate(calc(-50% + 1px), -50%);
    transform: translate(calc(-50% + 1px), -50%);
    z-index: 999;
    pointer-events: all;
    background: #282829;
    border-radius: 50%;
    cursor: -webkit-grab;
    cursor: grab;
}

@media (max-width: 1200px) {
    .shutter-container {
        width: auto;
    }

    svg#identity {
        width: calc(100vw - 4rem);
    }
}