.mh-image-set {
    background: #2d3436;
    border-radius: 3px;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    user-select: none;

    &::before {
        content: '';
        display: block;
        padding-top: 56.25%;
        width: 100%;
    }

    &--has-error {
        animation-name: mh-file-error-shake;
        animation-duration: 0.5s;
        animation-iteration-count: 1;

        @keyframes mh-file-error-shake {
            0% {
                background-color: #2d3436;
                margin-left: -16px;
            }

            10% {
                margin-left: 16px;
            }

            20% {
                margin-left: -8px;
            }

            30% {
                margin-left: 8px;
            }

            40% {
                margin-left: -4px;
            }

            50% {
                margin-left: 4px;
            }

            60% {
                margin-left: -2px;
            }

            70% {
                background-color: #eb4d4b;
                margin-left: 2px;
            }

            80% {
                margin-left: -1px;
            }

            90% {
                margin-left: 1px;
            }

            100% {
                background-color: #2d3436;
                margin-left: 0;
            }
        }
    }
}