.values-composition {
    position: relative;
    width: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 auto;
}

.values-composition__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.values-composition__layer:first-child {
    position: relative;
}

.values-composition__layer:nth-child(2) {
    animation: vc-rotate-cw 30s linear infinite;
    transform-origin: center center;
}

.values-composition__layer:nth-child(3) {
    animation: vc-rotate-ccw 20s linear infinite;
    transform-origin: center center;
}

@keyframes vc-rotate-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes vc-rotate-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/*RESPONSIVE*/

	/*phone*/
	@media (max-width: 767px) {
        .values-composition{
            width: 100%;
        }
	}

	/*tablet*/
	@media (min-width: 768px) and (max-width: 1024px) {

	}

	/*mobile and tablet*/
	@media (max-width: 1024px) {

	}

	/*desktop*/
	@media (min-width: 1025px) {

	}

	/*laptop 1*/
	@media (min-width: 1025px) and (max-width: 1439px) {

	}

	/*laptop 2*/
	@media (min-width: 1440px) and (max-width: 1700px) {

	}

	/*RESPONSIVE*/