body,
html {
  padding: 0;
  margin: 0;
  --cellSpacing: 16px;
  --green-7: #83ffe7;
}
* {
  box-sizing: border-box;
}

body {
  background: var(--green-7) url(../images/bg-diamante.svg);
  background-attachment: fixed;
  min-width: 314px;
}

.footer-box {
  /* background: #fff; */
}
.footer-box::before {
  clip-path: polygon(0 100%, 30% 0, 36% 100%, 100% 0, 100% 100%);
  height: 26px;
  background: #fff;
  bottom: 100%;
  /* clip-path: polygon(0 100%, 50% 0, 60% 100%, 100% 0, 100% 100%); */
  content: "";
  /* height: 16px; */
  left: 0;
  margin-bottom: -1px;
  /* position: absolute; */
  right: 0;
  display: block;
}
.footer-box .footer-left {
  display: flex;
  align-items: center;
  font: 700 18px "Torus", "Noto Sans Arabic", sans-serif;
  padding-left: 20px;
}
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding-top: 20px;
}
.footer-a-box {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.footer-a-box a {
  color: #002b50;
  margin: 0 10px;
}
.lang {
  margin: 0 20px;
  width: 60px;
}
.footer-sm {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8px;
  padding-bottom: 8px;
}

#app-root {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.game-class {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* padding: 0 3%; */
  width: 100%;
  margin-bottom: 50px;
}

.game-class .cls-box {
  height: 100px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  width: calc(33.3% - 60px);
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}
@media (max-width: 880.9px) {
  .game-class .cls-box {
    width: calc(50% - 60px);
  }
}
@media (max-width: 550.9px) {
  .game-class .cls-box {
    width: calc(100% - 0px);
  }
}
.game-class .cls-box img {
  width: 50px;
  margin-right: 20px;
}
.app-box {
  flex-grow: 1;
  margin: 0 auto;
  width: var(--root-content-width, 314px);
}

.game-iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: #fff;
}
.game-iframe .close {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
}
.game-iframe .close svg {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.game-iframe iframe {
  width: 100%;
  height: calc(100% - 50px);
  border: none;
}

/* 介绍 */
.desc-box {
  width: 100%;
  padding: 40px 30px;
  background: #fff;
  color: #002b50;
  margin-bottom: 50px;
}

.desc-box .s-title {
  font-size: 9px;
}
.desc-box .title {
  font-size: 20px;
}
.deesc-box p {
  font-size: 16;
  margin: 24px 0;
}
.desc-box a {
  color: #054a91 !important;
}

/* 介绍结束 */

@media (min-width: 111px) and (max-width: 990.9px) {
  .isPc.app-box {
    --root-content-width: 760px;
  }
}

@media (min-width: 991px) and (max-width: 1210.9px) {
  .isPc.app-box {
    --root-content-width: 980px;
  }
}

@media (min-width: 1211px) and (max-width: 1320.9px) {
  .isPc.app-box {
    --root-content-width: 1194px;
  }
}

@media (min-width: 1321px) and (max-width: 1540.9px) {
  .isPc.app-box {
    --root-content-width: 1304px;
  }
}

@media (min-width: 1541px) and (max-width: 1870.9px) {
  .isPc.app-box {
    --root-content-width: 1524px;
  }
}

@media (min-width: 1871px) {
  .isPc.app-box {
    --root-content-width: 1854px;
  }
}

@media (min-width: 111px) and (max-width: 990.9px) {
  .isPc .content-box {
    --gridTemplateColumns: 7;
    grid-template-areas:
      "... ... ip0 ip0 ip0 ip1 ip1"
      "... ... ip0 ip0 ip0 ip1 ip1"
      "ip2 ip2 ip0 ip0 ip0 ... ..."
      "ip2 ip2 ... ip3 ip3 ... ..."
      "... ... ... ip3 ip3 ip4 ip4"
      "... ... ... ... ... ip4 ip4"
      "ip5 ip5 ip5 ... ... ... ..."
      "ip5 ip5 ip5 ... ip6 ip6 ..."
      "ip5 ip5 ip5 ... ip6 ip6 ..."
      "... ... ip7 ip7 ... ... ..."
      "... ... ip7 ip7 ... ... ..."
      "... ... ... ip8 ip8 ip8 ..."
      "... ... ... ip8 ip8 ip8 ..."
      "ip9 ip9 ... ip8 ip8 ip8 ..."
      "ip9 ip9 ... ... ... ip10 ip10"
      "... ... ... ... ... ip10 ip10"
      "ip11 ip11 ip11 ... ip13 ip13 ..."
      "ip11 ip11 ip11 ... ip13 ip13 ..."
      "ip11 ip11 ip11 ... ... ... ..."
      "... ... ip14 ip14 ... ... ..."
      "... ... ip14 ip14 ip12 ip12 ip12"
      "... ... ... ... ip12 ip12 ip12"
      "... ... ... ... ip12 ip12 ip12"
      "ip15 ip15 ... ... ... ... ..."
      "ip15 ip15 ... ... ... ... ..."
      "... ... ip16 ip16 ... ... ..."
      "... ... ip16 ip16 ... ... ..."
      "... ... ... ip17 ip17 ... ..."
      "... ip18 ip18 ip17 ip17 ... ..."
      "... ip18 ip18 ... ... ip19 ip19"
      "... ... ... ... ... ip19 ip19";
  }
  .isPc .ip0 {
    grid-area: ip0;
  }
  .isPc .ip1 {
    grid-area: ip1;
  }
  .isPc .ip2 {
    grid-area: ip2;
  }
  .isPc .ip3 {
    grid-area: ip3;
  }
  .isPc .ip4 {
    grid-area: ip4;
  }
  .isPc .ip5 {
    grid-area: ip5;
  }
  .isPc .ip6 {
    grid-area: ip6;
  }
  .isPc .ip7 {
    grid-area: ip7;
  }
  .isPc .ip8 {
    grid-area: ip8;
  }
  .isPc .ip9 {
    grid-area: ip9;
  }
  .isPc .ip10 {
    grid-area: ip10;
  }
  .isPc .ip11 {
    grid-area: ip11;
  }
  /* .ip12 {
    grid-area: ip12;
  }
.isPc .ip13 {
    grid-area: ip13;
  }
.isPc .ip14 {
    grid-area: ip14;
  }
.isPc .ip15 {
    grid-area: ip15;
  }
.isPc .ip16 {
    grid-area: ip16;
  }
.isPc .ip17 {
    grid-area: ip17;
  }
.isPc .ip18 {
    grid-area: ip18;
  }
.isPc .ip19 {
    grid-area: ip19; 
  }*/
}

@media (min-width: 991px) and (max-width: 1210.9px) {
  .isPc .content-box {
    --gridTemplateColumns: 9;
    grid-template-areas:
      "... ... ip0 ip0 ip0 ip3 ip3 ip4 ip4"
      "ip2 ip2 ip0 ip0 ip0 ip3 ip3 ip4 ip4"
      "ip2 ip2 ip0 ip0 ip0 ip1 ip1 ip1 ..."
      "... ... ... ip6 ip6 ip1 ip1 ip1 ..."
      "... ip5 ip5 ip6 ip6 ip1 ip1 ip1 ..."
      "... ip5 ip5 ip8 ip8 ... ip9 ip9 ..."
      "... ip7 ip7 ip8 ip8 ... ip9 ip9 ..."
      "... ip7 ip7 ... ... ... ... ... ..."
      "... ... ip10 ip10 ip10 ... ip13 ip13 ..."
      "... ... ip10 ip10 ip10 ... ip13 ip13 ..."
      "... ... ip10 ip10 ip10 ... ... ... ..."
      "ip14 ip14 ... ... ... ... ... ... ..."
      "ip14 ip14 ... ... ... ... ip11 ip11 ip11"
      "... ... ... ... ... ... ip11 ip11 ip11"
      "... ip15 ip15 ... ... ... ip11 ip11 ip11"
      "... ip15 ip15 ... ... ... ... ... ..."
      "... ... ... ... ... ... ... ... ..."
      "... ... ... ... ip12 ip12 ip12 ... ..."
      "... ... ... ... ip12 ip12 ip12 ... ..."
      "... ip16 ip16 ... ip12 ip12 ip12 ... ..."
      "... ip16 ip16 ip17 ip17 ... ... ... ..."
      "... ... ... ip17 ip17 ... ... ... ..."
      "... ... ... ... ... ... ... ip18 ip18"
      "... ... ... ... ... ... ... ip18 ip18";
  }
  .isPc .ip0 {
    grid-area: ip0;
  }
  .isPc .ip1 {
    grid-area: ip1;
  }
  .isPc .ip2 {
    grid-area: ip2;
  }
  .isPc .ip3 {
    grid-area: ip3;
  }
  .isPc .ip4 {
    grid-area: ip4;
  }
  .isPc .ip5 {
    grid-area: ip5;
  }
  .isPc .ip6 {
    grid-area: ip6;
  }
  .isPc .ip7 {
    grid-area: ip7;
  }
  .isPc .ip8 {
    grid-area: ip8;
  }
  .isPc .ip9 {
    grid-area: ip9;
  }
  .isPc .ip10 {
    grid-area: ip10;
  }
  .isPc .ip11 {
    grid-area: ip11;
  }
  /* .ip12 {
    grid-area: ip12;
  }
.isPc .ip13 {
    grid-area: ip13;
  }
 .isPc .ip14 {
    grid-area: ip14;
  }
.isPc .ip15 {
    grid-area: ip15;
  }
.isPc .ip16 {
    grid-area: ip16;
  }
.isPc .ip17 {
    grid-area: ip17;
  }
.isPc .ip18 {
    grid-area: ip18;
  } */
}

@media (min-width: 1211px) and (max-width: 1320.9px) {
  .isPc .content-box {
    --gridTemplateColumns: 11;
    grid-template-areas:
      "... ... ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5"
      "ip2 ip2 ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5"
      "ip2 ip2 ip0 ip0 ip0 ip1 ip1 ip1 ... ip6 ip6"
      "... ... ... ... ... ip1 ip1 ip1 ... ip6 ip6"
      "... ip7 ip7 ip8 ip8 ip1 ip1 ip1 ... ip9 ip9"
      "... ip7 ip7 ip8 ip8 ... ... ... ... ip9 ip9"
      "... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ip10 ip10 ip10 ... ..."
      "ip11 ip11 ... ... ... ... ip10 ip10 ip10 ... ..."
      "ip11 ip11 ip12 ip12 ... ... ip10 ip10 ip10 ... ..."
      "... ... ip12 ip12 ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... ip13 ip13 ip13 ... ... ... ... ..."
      "... ... ... ip13 ip13 ip13 ... ip14 ip14 ... ..."
      "... ... ... ip13 ip13 ip13 ... ip14 ip14 ... ..."
      "... ... ... ... ... ... ... ... ... ... ..."
      "... ip15 ip15 ... ... ... ... ... ... ip16 ip16"
      "... ip15 ip15 ip17 ip17 ... ... ... ... ip16 ip16"
      "... ... ... ip17 ip17 ... ... ... ... ... ...";
  }
  .isPc .ip0 {
    grid-area: ip0;
  }
  .isPc .ip1 {
    grid-area: ip1;
  }
  .isPc .ip2 {
    grid-area: ip2;
  }
  .isPc .ip3 {
    grid-area: ip3;
  }
  .isPc .ip4 {
    grid-area: ip4;
  }
  .isPc .ip5 {
    grid-area: ip5;
  }
  .isPc .ip6 {
    grid-area: ip6;
  }
  .isPc .ip7 {
    grid-area: ip7;
  }
  .isPc .ip8 {
    grid-area: ip8;
  }
  .isPc .ip9 {
    grid-area: ip9;
  }
  .isPc .ip10 {
    grid-area: ip10;
  }
  .isPc .ip11 {
    grid-area: ip11;
  }
  /* .ip12 {
    grid-area: ip12;
  }
.isPc .ip13 {
    grid-area: ip13;
  }
.isPc .ip14 {
    grid-area: ip14;
  }
.isPc .ip15 {
    grid-area: ip15;
  }
.isPc .ip16 {
    grid-area: ip16;
  }
.isPc .ip17 {
    grid-area: ip17;
  } */
}

@media (min-width: 1321px) and (max-width: 1540.9px) {
  .isPc .content-box {
    --gridTemplateColumns: 12;
    grid-template-areas:
      "... ... ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5 ..."
      "ip2 ip2 ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5 ..."
      "ip2 ip2 ip0 ip0 ip0 ip1 ip1 ip1 ... ip6 ip6 ..."
      "... ... ... ... ... ip1 ip1 ip1 ... ip6 ip6 ..."
      "... ip7 ip7 ip8 ip8 ip1 ip1 ip1 ... ip9 ip9 ..."
      "... ip7 ip7 ip8 ip8 ... ... ... ... ip9 ip9 ..."
      "... ... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ... ip10 ip10 ... ... ..."
      "ip11 ip11 ... ... ... ... ... ip10 ip10 ... ... ..."
      "ip11 ip11 ip12 ip12 ... ... ... ... ... ... ... ..."
      "... ... ip12 ip12 ... ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ip13 ip13 ... ... ... ..."
      "... ... ... ... ... ... ip13 ip13 ... ... ... ..."
      "... ip14 ip14 ... ... ... ... ... ... ... ... ..."
      "... ip14 ip14 ... ... ... ... ... ... ip15 ip15 ..."
      "... ... ... ... ... ... ... ... ... ip15 ip15 ...";
  }
  .isPc .ip0 {
    grid-area: ip0;
  }
  .isPc .ip1 {
    grid-area: ip1;
  }
  .isPc .ip2 {
    grid-area: ip2;
  }
  .isPc .ip3 {
    grid-area: ip3;
  }
  .isPc .ip4 {
    grid-area: ip4;
  }
  .isPc .ip5 {
    grid-area: ip5;
  }
  .isPc .ip6 {
    grid-area: ip6;
  }
  .isPc .ip7 {
    grid-area: ip7;
  }
  .isPc .ip8 {
    grid-area: ip8;
  }
  .isPc .ip9 {
    grid-area: ip9;
  }
  .isPc .ip10 {
    grid-area: ip10;
  }
  .isPc .ip11 {
    grid-area: ip11;
  }
  .isPc .ip12 {
    grid-area: ip12;
  }
  /* .ip13 {
    grid-area: ip13;
  }
.isPc .ip14 {
    grid-area: ip14;
  }
.isPc .ip15 {
    grid-area: ip15;
  } */
}
@media (min-width: 1541px) and (max-width: 1870.9px) {
  .isPc .content-box {
    --gridTemplateColumns: 14;
    grid-template-areas:
      "... ... ip0 ip0 ip0 ip4 ip4 ... ... ... ... ... ip5 ip5"
      "... ... ip0 ip0 ip0 ip4 ip4 ... ip2 ip2 ip2 ... ip5 ip5"
      "ip3 ip3 ip0 ip0 ip0 ... ... ... ip2 ip2 ip2 ... ip6 ip6"
      "ip3 ip3 ... ... ... ip1 ip1 ip1 ip2 ip2 ip2 ... ip6 ip6"
      "ip7 ip7 ... ip8 ip8 ip1 ip1 ip1 ip9 ip9 ip10 ip10 ... ..."
      "ip7 ip7 ... ip8 ip8 ip1 ip1 ip1 ip9 ip9 ip10 ip10 ... ..."
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... "
      "... ... ... ... ... ... ... ... ip11 ip11 ip11 ... ... ... "
      "ip12 ip12 ... ... ... ... ... ... ip11 ip11 ip11 ... ... ... "
      "ip12 ip12 ... ... ... ... ... ... ip11 ip11 ip11 ... ... ... "
      "... ... ip13 ip13 ... ... ... ... ... ... ... ... ... ... "
      "... ... ip13 ip13 ... ... ... ... ... ... ... ... ... ... "
      "... ... ... ... ... ... ip14 ip14 ... ... ... ip15 ip15 ip15"
      "ip16 ip16 ... ... ... ... ip14 ip14 ... ... ... ip15 ip15 ip15"
      "ip16 ip16 ... ... ... ... ... ... ... ... ... ip15 ip15 ip15";
  }
  .isPc .ip0 {
    grid-area: ip0;
  }
  .isPc .ip1 {
    grid-area: ip1;
  }
  .isPc .ip2 {
    grid-area: ip2;
  }
  .isPc .ip3 {
    grid-area: ip3;
  }
  .isPc .ip4 {
    grid-area: ip4;
  }
  .isPc .ip5 {
    grid-area: ip5;
  }
  .isPc .ip6 {
    grid-area: ip6;
  }
  .isPc .ip7 {
    grid-area: ip7;
  }
  .isPc .ip8 {
    grid-area: ip8;
  }
  .isPc .ip9 {
    grid-area: ip9;
  }
  .isPc .ip10 {
    grid-area: ip10;
  }
  .isPc .ip11 {
    grid-area: ip11;
  }
  .isPc .ip12 {
    grid-area: ip12;
  }
  /* .ip13 {
    grid-area: ip13;
  }
.isPc .ip14 {
    grid-area: ip14;
  }
.isPc .ip15 {
    grid-area: ip15;
  }
.isPc .ip16 {
    grid-area: ip16;
  } */
}

@media (min-width: 1871px) {
  .isPc .content-box {
    --gridTemplateColumns: 17;
    grid-template-areas:
      "... ... ip0 ip0 ip0 ... ... ... ... ... ... ... ... ip7 ip7 ip8 ip8"
      "... ... ip0 ip0 ip0 ip4 ip4 ip5 ip5 ip2 ip2 ip2 ... ip7 ip7 ip8 ip8"
      "... ... ip0 ip0 ip0 ip4 ip4 ip5 ip5 ip2 ip2 ip2 ip6 ip6 ip3 ip3 ip3"
      "ip9 ip9 ip10 ip10 ip11 ip11 ip1 ip1 ip1 ip2 ip2 ip2 ip6 ip6 ip3 ip3 ip3"
      "ip9 ip9 ip10 ip10 ip11 ip11 ip1 ip1 ip1 ip12 ip12 ip13 ip13 ... ip3 ip3 ip3"
      "... ip14 ip14 ip15 ip15 ... ip1 ip1 ip1 ip12 ip12 ip13 ip13 ip16 ip16 ip17 ip17"
      "... ip14 ip14 ip15 ip15 ... ip18 ip18 ip19 ip19 ip20 ip20 ... ip16 ip16 ip17 ip17"
      "... ... ... ... ... ... ip18 ip18 ip19 ip19 ip20 ip20 ... ... ... ... ... "
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... "
      "ip22 ip22 ... ... ... ... ... ... ... ... ip21 ip21 ip21 ... ... ... ... "
      "ip22 ip22 ... ... ... ... ip24 ip24 ... ... ip21 ip21 ip21 ... ... ... ... "
      "... ... ip23 ip23 ... ... ip24 ip24 ... ... ip21 ip21 ip21 ... ... ... ... "
      "... ... ip23 ip23 ... ... ... ... ... ... ... ... ... ... ... ip25 ip25"
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ip25 ip25";
  }
  .isPc .ip0 {
    grid-area: ip0;
  }
  .isPc .ip1 {
    grid-area: ip1;
  }
  .isPc .ip2 {
    grid-area: ip2;
  }
  .isPc .ip3 {
    grid-area: ip3;
  }
  .isPc .ip4 {
    grid-area: ip4;
  }
  .isPc .ip5 {
    grid-area: ip5;
  }
  .isPc .ip6 {
    grid-area: ip6;
  }
  .isPc .ip7 {
    grid-area: ip7;
  }
  .isPc .ip8 {
    grid-area: ip8;
  }
  .isPc .ip9 {
    grid-area: ip9;
  }
  .isPc .ip10 {
    grid-area: ip10;
  }
  .isPc .ip11 {
    grid-area: ip11;
  }
  .isPc .ip12 {
    grid-area: ip12;
  }
  .isPc .ip13 {
    grid-area: ip13;
  }
  .isPc .ip14 {
    grid-area: ip14;
  }
  .isPc .ip15 {
    grid-area: ip15;
  }
  .isPc .ip16 {
    grid-area: ip16;
  }
  .isPc .ip17 {
    grid-area: ip17;
  }
  .isPc .ip18 {
    grid-area: ip18;
  }
  .isPc .ip19 {
    grid-area: ip19;
  }
  .isPc .ip20 {
    grid-area: ip20;
  }
  /* .ip21 {
    grid-area: ip21;
  }
.isPc .ip22 {
    grid-area: ip22;
  }
.isPc .ip23 {
    grid-area: ip23;
  }
.isPc .ip24 {
    grid-area: ip24;
  }
.isPc .ip25 {
    grid-area: ip25;
  } */
}

/* 移动端 */

@media (min-width: 111px) and (max-width: 550.9px) {
  .isMobile.app-box {
    --root-content-width: 314px;
  }
}

@media (min-width: 551px) and (max-width: 660.9px) {
  .isMobile.app-box {
    --root-content-width: 534px;
  }
}

@media (min-width: 661px) and (max-width: 880.9px) {
  .isMobile.app-box {
    --root-content-width: 644px;
  }
}

@media (min-width: 881px) {
  .isMobile.app-box {
    --root-content-width: 864px;
  }
}

.isMobile.app-box {
  flex-grow: 1;
  margin: 0 auto;
  width: var(--root-content-width, 314px);
}

@media (min-width: 111px) and (max-width: 550.9px) {
  .isMobile .content-box {
    grid-template-areas:
      "... ip0 ip0"
      "... ip0 ip0"
      "... ... ..."
      "ip1 ip1 ..."
      "ip1 ip1 ..."
      "... ... ..."
      "... ip2 ip2"
      "... ip2 ip2"
      "... ... ..."
      "ip3 ip3 ..."
      "ip3 ip3 ..."
      "... ... ...";
  }
}

@media (min-width: 551px) and (max-width: 660.9px) {
  .isMobile .content-box {
    --gridTemplateColumns: 5;
    grid-template-areas:
      "... ... ip0 ip0 ..."
      "ip1 ip1 ip0 ip0 ..."
      "ip1 ip1 ... ... ..."
      "ip2 ip2 ip2 ... ..."
      "ip2 ip2 ip2 ip3 ip3"
      "ip2 ip2 ip2 ip3 ip3"
      "... ... ip4 ip4 ..."
      "... ... ip4 ip4 ..."
      "ip5 ip5 ip6 ip6 ip6"
      "ip5 ip5 ip6 ip6 ip6"
      "... ... ip6 ip6 ip6";
  }
}

@media (min-width: 661px) and (max-width: 880.9px) {
  .isMobile .content-box {
    --gridTemplateColumns: 6;
    grid-template-areas:
      "... ip0 ip0 ... ... ..."
      "... ip0 ip0 ... ip1 ip1"
      "ip2 ip2 ... ... ip1 ip1"
      "ip2 ip2 ... ip3 ip3 ip3"
      "ip4 ip4 ip4 ip3 ip3 ip3"
      "ip4 ip4 ip4 ip3 ip3 ip3"
      "ip4 ip4 ip4 ip5 ip5 ip5"
      "... ... ... ip5 ip5 ip5"
      "... ip6 ip6 ip5 ip5 ip5"
      "... ip6 ip6 ... ... ...";
  }
}

@media (min-width: 881px) {
  .isMobile .content-box {
    --gridTemplateColumns: 8;
    grid-template-areas:
      "... ip0 ip0 ... ... ... ... ..."
      "... ip0 ip0 ip1 ip1 ip1 ip2 ip2"
      "ip3 ip3 ... ip1 ip1 ip1 ip2 ip2"
      "ip3 ip3 ... ip1 ip1 ip1 ip4 ip4"
      "ip5 ip5 ip5 ip6 ip6 ip6 ip4 ip4"
      "ip5 ip5 ip5 ip6 ip6 ip6 ip7 ip7"
      "ip5 ip5 ip5 ip6 ip6 ip6 ip7 ip7"
      "ip8 ip8 ip9 ip9 ip10 ip10 ... ..."
      "ip8 ip8 ip9 ip9 ip10 ip10 ... ...";
  }
}

.content-box {
  grid-gap: var(--cellSpacing);
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(var(--gridTemplateColumns, 3), 94px);
  grid-template-rows: repeat(auto-fill, 94px);
  justify-content: center;
  list-style-type: none;
  margin: 16px auto 0;
  padding: 0;
}

.box {
  /* background: blue; */
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.isMobile .ip0 {
  grid-area: ip0;
}

.isMobile .ip1 {
  grid-area: ip1;
}
.isMobile .ip2 {
  grid-area: ip2;
}
.isMobile .ip3 {
  grid-area: ip3;
}
/* .ip4 {
    grid-area: ip4;
  } */
@media (min-width: 551px) {
  .isMobile .ip4 {
    grid-area: ip4;
  }
  .isMobile .ip5 {
    grid-area: ip5;
  }
  .isMobile .ip6 {
    grid-area: ip6;
  }
}
@media (min-width: 661px) {
  .isMobile .ip4 {
    grid-area: ip4;
  }
  .isMobile .ip5 {
    grid-area: ip5;
  }
  .isMobile .ip6 {
    grid-area: ip6;
  }
}
/* 661px */

@media (min-width: 881px) {
  .isMobile .ip7 {
    grid-area: ip7;
  }
  .isMobile .ip8 {
    grid-area: ip8;
  }
  .isMobile .ip9 {
    grid-area: ip9;
  }
  .isMobile .ip10 {
    grid-area: ip10;
  }
}