/* circle with four pictures */
/* index.php, about.php, tuition.php */
.gallery {
  --g: 8px; /* the gap */
  --s: 350px; /* the size */

  display: grid;
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1/1;
  width: 350px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(var(--_x, 0), var(--_y, 0));
  cursor: pointer;
  z-index: 0;
  transition: 1.3s, z-index 0s 0.3s;
}
.gallery img:hover {
  --_i: 1;
  z-index: 1;
  transition: transform 0.4s, clip-path 0.6s 0.4s, z-index 0s;
}
.gallery:hover img {
  transform: translate(0, 0);
}
.gallery > img:nth-child(1) {
  clip-path: polygon(
    50% 50%,
    calc(50% * var(--_i, 0)) calc(120% * var(--_i, 0)),
    0 calc(100% * var(--_i, 0)),
    0 0,
    100% 0,
    100% calc(100% * var(--_i, 0)),
    calc(100% - 50% * var(--_i, 0)) calc(120% * var(--_i, 0))
  );
  --_y: calc(-1 * var(--g));
}
.gallery > img:nth-child(2) {
  clip-path: polygon(
    50% 50%,
    calc(100% - 120% * var(--_i, 0)) calc(50% * var(--_i, 0)),
    calc(100% - 100% * var(--_i, 0)) 0,
    100% 0,
    100% 100%,
    calc(100% - 100% * var(--_i, 0)) 100%,
    calc(100% - 120% * var(--_i, 0)) calc(100% - 50% * var(--_i, 0))
  );
  --_x: var(--g);
}
.gallery > img:nth-child(3) {
  clip-path: polygon(
    50% 50%,
    calc(100% - 50% * var(--_i, 0)) calc(100% - 120% * var(--_i, 0)),
    100% calc(100% - 120% * var(--_i, 0)),
    100% 100%,
    0 100%,
    0 calc(100% - 100% * var(--_i, 0)),
    calc(50% * var(--_i, 0)) calc(100% - 120% * var(--_i, 0))
  );
  --_y: var(--g);
}
.gallery > img:nth-child(4) {
  clip-path: polygon(
    50% 50%,
    calc(120% * var(--_i, 0)) calc(50% * var(--_i, 0)),
    calc(100% * var(--_i, 0)) 0,
    0 0,
    0 100%,
    calc(100% * var(--_i, 0)) 100%,
    calc(120% * var(--_i, 0)) calc(100% - 50% * var(--_i, 0))
  );
  --_x: calc(-1 * var(--g));
}

.sec1Eagle {width:470px;height:400px;position:absolute;top:24vh;left:15vw}

@media only screen and (max-width: 1199px) {
.sec1Eagle {width:370px;height:315px;left:5vw }
}
@media only screen and (max-width: 991px) {
.sec1Eagle {top:30vh;left:7vw }
.gallery > img {width:170px;height:170px}
}
@media only screen and (max-width: 775px) {
.sec1Eagle {top:83vh;left:39vw }
.gallery > img {width:110px;height:110px}
}
@media only screen and (max-width: 575px) {
.sec1Eagle {top:72vh;left:39vw }
.gallery > img {width:170px;height:170px}
}
@media only screen and (max-width: 375px) {
/*.sec1Eagle {left:28vw }*/
.sec1Eagle {display:none;}
}