*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑" sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #222;
}

body img{
    max-width: 128px;
}

.container{
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px 1fr));
    grid-template-rows: minmax(100px auto);
    grid-auto-flow: dense;
    margin: 40px;
    grid-gap:10px
}

.container .box{
    background: #333;
    padding: 20px;
    display: grid;
    place-items: center;
    font-size: 20px;
    text-align: center;
    color: #fff;
    transition: .5s;
}

.container .box:hover{
   background: #e91e63;
}

.container .box img{
    position: relative;
    max-width: 100px;
    margin-bottom: 10px;
}

/* column设置所占的列宽，row设置所占的列高 */
/* 洗手 */
.container .box:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
}
/* 感冒 */
.container .box:nth-child(2) {
    grid-column: span 1;
    grid-row: span 2 ;
}
/* 飞机 */
.container .box:nth-child(3) {
    grid-column: span 2;
    grid-row: span 2;
}
/* 医疗包 */
.container .box:nth-child(4){
    grid-column: span 2;
    grid-row: span 4;
}
/* 口罩 */
.container .box:nth-child(5) {
    grid-column: span 1;
    grid-row: span 1;
}
/* 文字 */
.container .box:nth-child(6) {
    grid-column: span 3;
    grid-row: span 2;
}
/* 做饭 */
.container .box:nth-child(7){
  grid-column: span 1;
  grid-row: span 2;
}
/* 小猫 */
.container .box:nth-child(8){
     grid-column: span 1;
     grid-row: span 2;
}

@media(max-width:991px){
    .container{
        grid-template-columns: repeat(auto-fill,mainmax(50%,1fr));
        grid-template-rows: minmax(auto,auto);
    }
    .container .box{
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

.title{     
    font-family: "league-Gothic",Courier;
    font-size: 60px;
    text-transform: uppercase;
    color: #fff;
    text-shadow:0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;
}

.sub-title{
    font-size: 20px;
    text-shadow: 0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #ff00de,
    0 0 70px #ff00de,
    0 0 80px #ff00de,
    0 0 100px #ff00de,
    0 0 150px #ff00de;
}