.container {
  width: 100%; /* 默认宽度 */
  margin: 0 auto; /* 水平居中 */

  /* 使用媒体查询来处理不同的设备尺寸 */
  @media (min-width: 768px) { /* Tablet */
    width: 100%;
  }

  @media (min-width: 992px) { /* Desktop */
    width: 960px;
  }

  @media (min-width: 1200px) { /* Wide Screen */
    width: 1140px;
  }

  @media (min-width: 1920px) { /* Full HD */
    width: 1200px;
  }
}

.blocks {
  display: grid;
}

/* 默认样式 */
.blocks {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media only screen and (max-width: 1024px) {
  .blocks {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 700px) {
  .blocks {
    grid-template-columns: 1fr 1fr;
  }
}