/*  

	Author : Moskva Yigit
	Author URI : http://www.moskvayigit.com/

	Table of Contents
	- On-Scroll Grid Rotation
	 
*/

.ki-description{width:100%;}

/*----------------------------
	.-- On-Scroll Grid Rotation
-----------------------------*/

.grid--rotation_item video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(calc(360deg * var(--progress) * -1)) scale(1.95);
}

.grid--rotation_item img {
  height: 100%;
  width: 100%;
  transform: rotate(calc(360deg * var(--progress) * -1)) scale(1.95);
}

.grid--rotation {
  position: relative;
  height: 500vh;
  display: flex;
}

.grid--rotation_wrapper {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.grid--rotation_inner {
  display: grid;
  grid-template-areas: 
        ". a a a a . . . ."
        ". a a a a b b . ."
        ". a a a a b b . ."
        "c c c d d d e e ."
        "c c c d d d e e ."
        "c c c d d d f f f"
        ". g g h h h f f f"
        ". g g h h h f f f"
        ". . . h h h . . ."
        ". . . h h h . . .";
  grid-template-columns: repeat(9, 6vh);
  grid-template-rows: repeat(10, 6vh);
  gap: 1.5rem;
  transform: rotate(calc(360deg * var(--progress))) scale(calc(1 + var(--progress) * 2));
  transform-origin: 50% 45%;
}

.grid--rotation_item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.-a,
.ki--1 {
  grid-area: a;
}

.-b,
.ki--2 {
  grid-area: b;
}

.-c,
.ki--3 {
  grid-area: c;
}

.-d,
.ki--4 {
  grid-area: d;
}

.-e,
.ki--5 {
  grid-area: e;
}

.-f,
.ki--6 {
  grid-area: f;
}

.-g,
.ki--7 {
  grid-area: g;
}

.-h,
.ki--8 {
  grid-area: h;
}