@import 'my_root.css';
.my_grid {
  display: grid;
  grid-template-columns: repeat(12, 125px);
  grid-auto-flow: dense;
  grid-gap: 20px;
  justify-content: center;
}
.my_grid .large {
  grid-row-end: span 2;
  grid-column-end: span 2;
}
.my_grid .large0 {
  grid-row-start: 1;
  grid-column-start: 2;
}
.my_grid .large1 {
  grid-row-start: 1;
  grid-column-start: 6;
}
.my_grid .large2 {
  grid-row-start: 1;
  grid-column-start: 10;
}
.my_grid .large3 {
  grid-row-start: 4;
  grid-column-start: 4;
}
.my_grid .large4 {
  grid-row-start: 4;
  grid-column-start: 8;
}
.my_grid .large5 {
  grid-row-start: 7;
  grid-column-start: 2;
}
.my_grid .large6 {
  grid-row-start: 7;
  grid-column-start: 6;
}
.my_grid .large7 {
  grid-row-start: 7;
  grid-column-start: 10;
}
@media screen and (max-width: 1780px) {
  .my_grid {
    grid-template-columns: repeat(11, 125px);
  }
}
@media screen and (max-width: 1635px) {
  .my_grid {
    grid-template-columns: repeat(10, 125px);
  }
  .my_grid .large2 {
    grid-row-start: 1;
    grid-column-start: 9;
  }
  .my_grid .large7 {
    grid-row-start: 7;
    grid-column-start: 9;
  }
}
@media screen and (max-width: 1490px) {
  .my_grid {
    grid-template-columns: repeat(9, 125px);
  }
  .my_grid .large0 {
    grid-row-start: 1;
    grid-column-start: 1;
  }
  .my_grid .large1 {
    grid-row-start: 1;
    grid-column-start: 4;
  }
  .my_grid .large2 {
    grid-row-start: 1;
    grid-column-start: 7;
  }
  .my_grid .large3 {
    grid-row-start: 4;
    grid-column-start: 2;
  }
  .my_grid .large4 {
    grid-row-start: 4;
    grid-column-start: 6;
  }
  .my_grid .large5 {
    grid-row-start: 7;
    grid-column-start: 1;
  }
  .my_grid .large6 {
    grid-row-start: 7;
    grid-column-start: 4;
  }
  .my_grid .large7 {
    grid-row-start: 7;
    grid-column-start: 7;
  }
}
@media screen and (max-width: 1345px) {
  .my_grid {
    grid-template-columns: repeat(8, 125px);
  }
  .my_grid .large0 {
    grid-row-start: 2;
    grid-column-start: 1;
  }
  .my_grid .large1 {
    grid-row-start: 2;
    grid-column-start: 4;
  }
  .my_grid .large2 {
    grid-row-start: 2;
    grid-column-start: 7;
  }
  .my_grid .large3 {
    grid-row-start: 5;
    grid-column-start: 2;
  }
  .my_grid .large4 {
    grid-row-start: 5;
    grid-column-start: 6;
  }
  .my_grid .large5 {
    grid-row-start: 8;
    grid-column-start: 1;
  }
  .my_grid .large6 {
    grid-row-start: 8;
    grid-column-start: 4;
  }
  .my_grid .large7 {
    grid-row-start: 8;
    grid-column-start: 7;
  }
}
@media screen and (max-width: 1200px) {
  .my_grid {
    grid-template-columns: repeat(7, 125px);
  }
  .my_grid .large0 {
    grid-row-start: 2;
    grid-column-start: 1;
  }
  .my_grid .large1 {
    grid-row-start: 2;
    grid-column-start: 5;
  }
  .my_grid .large2 {
    grid-row-start: 6;
    grid-column-start: 3;
  }
  .my_grid .large3 {
    grid-row-start: 9;
    grid-column-start: 1;
  }
  .my_grid .large4 {
    grid-row-start: 9;
    grid-column-start: 5;
  }
  .my_grid .large5 {
    grid-row-start: 11;
    grid-column-start: 3;
  }
  .my_grid .large6 {
    grid-row-start: 14;
    grid-column-start: 1;
  }
  .my_grid .large7 {
    grid-row-start: 14;
    grid-column-start: 5;
  }
}
@media screen and (max-width: 1055px) {
  .my_grid {
    grid-template-columns: repeat(6, 125px);
  }
}
@media screen and (max-width: 910px) {
  .my_grid {
    grid-template-columns: repeat(5, 125px);
  }
  .my_grid .large0 {
    grid-row-start: 2;
    grid-column-start: 1;
  }
  .my_grid .large1 {
    grid-row-start: 2;
    grid-column-start: 4;
  }
  .my_grid .large2 {
    grid-row-start: 6;
    grid-column-start: 2;
  }
  .my_grid .large3 {
    grid-row-start: 9;
    grid-column-start: 1;
  }
  .my_grid .large4 {
    grid-row-start: 9;
    grid-column-start: 4;
  }
  .my_grid .large5 {
    grid-row-start: 12;
    grid-column-start: 2;
  }
  .my_grid .large6 {
    grid-row-start: 15;
    grid-column-start: 1;
  }
  .my_grid .large7 {
    grid-row-start: 15;
    grid-column-start: 4;
  }
}
@media screen and (max-width: 780px) {
  .my_grid {
    grid-template-columns: repeat(5, 115px);
  }
}
@media screen and (max-width: 750px) {
  .my_grid {
    grid-template-columns: repeat(4, 18vw);
    grid-gap: 3.47vw;
  }
  .my_grid .grid_item:hover {
    transform: scale(1.06) translateY(-2.4vw);
  }
  .my_grid .large0 {
    grid-row-start: 2;
    grid-column-start: 1;
  }
  .my_grid .large1 {
    grid-row-start: 8;
    grid-column-start: 2;
  }
  .my_grid .large2 {
    grid-row-start: 11;
    grid-column-start: 3;
  }
  .my_grid .large3 {
    grid-row-start: 14;
    grid-column-start: 1;
  }
  .my_grid .large4 {
    grid-row-start: 18;
    grid-column-start: 2;
  }
  .my_grid .large5 {
    grid-row-start: 22;
    grid-column-start: 3;
  }
  .my_grid .large6 {
    grid-row-start: 26;
    grid-column-start: 3;
  }
  .my_grid .large7 {
    grid-row-start: 30;
    grid-column-start: 3;
  }
}
.my_grid_drawer {
  display: grid;
  grid-template-columns: repeat(5, 102px);
  grid-gap: 20px;
  grid-auto-flow: dense;
  justify-content: center;
}
@media screen and (max-width: 750px) {
  .my_grid_drawer {
    grid-template-columns: repeat(3, 21vw);
    grid-gap: 1.9vw;
  }
}
.grid_item {
  border-radius: 13px;
  display: flex;
  box-shadow: var(--my-grid-item-box-shadow);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
}
.grid_item .icon {
  width: 100%;
  border-radius: 13px;
}
.grid_item .item_info_l {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.grid_item .item_info_l .hot {
  display: none;
  width: 90px;
  height: 66px;
  position: absolute;
  top: -22px;
  left: -17px;
}
.grid_item .item_info_l .name {
  display: none;
  padding-bottom: 10px;
  height: 50%;
  flex-direction: column;
  justify-content: end;
  text-align: center;
  font-weight: 600;
  background: var(--my-grid-item-info-l-bgcolor);
  color: var(--my-grid-item-info-l-color);
  border-radius: 0 0 13px 13px;
}
.grid_item .item_info_s {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.grid_item .item_info_s .name {
  display: none;
  padding: 9px;
  text-align: center;
  align-content: center;
  justify-content: center;
  color: var(--my-grid-item-info-s-color);
  border-radius: 0 0 13px 13px;
}
@media screen and (max-width: 750px) {
  .grid_item {
    border-radius: 2.7vw;
    /*
		.item_info_l {
			.hot {
				display: block;
				width: 16vw;
				height: 10vw;

				top: -3vw;
				left: -2vw;
			}
			.name {
				display: flex;
				padding-bottom: 2.9333333333vw;
				font-size: 3.2vw;
				border-radius: 0 0 2.7vw 2.7vw;
			}
		}
		*/
  }
  .grid_item .icon {
    border-radius: 2.7vw;
  }
}
.grid_item:hover {
  transform: scale(1.08) translateY(-6px);
  z-index: 1;
}
@media screen and (min-width: 750px) {
  .grid_item:hover .item_info_l .hot {
    display: block;
  }
  .grid_item:hover .item_info_l .name {
    display: flex;
  }
  .grid_item:hover .item_info_s {
    background: var(--my-grid-item-info-s-bgcolor);
  }
  .grid_item:hover .item_info_s .name {
    display: flex;
    border-radius: 0 0 2.7vw 2.7vw;
  }
}