.ub-cover,
.ub-cover-1-1, .ub-cover-3-1, .ub-cover-4-1, .ub-cover-4-3, .ub-cover-3-2, .ub-cover-2-1, .ub-cover-5-2,.ub-cover-5-3,
.ub-cover-1-3, .ub-cover-1-4, .ub-cover-3-4, .ub-cover-2-3, .ub-cover-1-2, .ub-cover-3-5 {
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &:after {
        content: '';
        display: block;
    }

    &.contain {
        background-size: contain;
    }

    &.circle {
        border-radius: 50%;
    }
}

.ub-cover-1-1:after {
    margin-top: 100%;
}

.ub-cover-3-1:after {
    margin-top: 33.33333333%;
}

.ub-cover-1-3:after {
    margin-top: 300%;
}

.ub-cover-4-1:after {
    margin-top: 25%;
}

.ub-cover-1-4:after {
    margin-top: 400%;
}

.ub-cover-4-3:after {
    margin-top: 75%;
}

.ub-cover-3-4:after {
    margin-top: 133.3333333%;
}

.ub-cover-3-2:after {
    margin-top: 66.6666667%;
}

.ub-cover-2-3:after {
    margin-top: 150%;
}

.ub-cover-2-1:after {
    margin-top: 50%;
}

.ub-cover-1-2:after {
    margin-top: 200%;
}

.ub-cover-5-2:after {
    margin-top: 40%;
}

.ub-cover-5-3:after {
    margin-top: 60%;
}

.ub-cover-3-5:after {
    margin-top: 166.6666667%;
}

.ub-cover-5-4:after {
    margin-top: 80%;
}

.ub-cover-4-5:after {
    margin-top: 125%;
}

.ub-cover-6-5:after {
    margin-top: 80%;
}

.ub-cover-5-6:after {
    margin-top: 120%;
}

.ub-cover-7-6:after {
    margin-top: 85.7%;
}

.ub-cover-6-7:after {
    margin-top: 116.6666667%;
}
