/* 容器样式 */
#artwork {
  position: relative;
  width: 600px; /* 容器宽度 */
  height: 600px; /* 容器高度 */
  margin: 50px auto; /* 居中显示 */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列网格布局 */
  grid-template-rows: 1fr 1fr; /* 两行网格布局 */
  background-color: white;
}

/* 正方形基础样式 */
.square {
  width: 100%;
  height: 100%;
}

/* 颜色 */
.red {
  background-color: #D24D38; /* Cadmium Red */
}

.blue {
  background-color: #3B3F7F; /* Cobalt Blue */
}

/* 叠加的小矩形 */
.small-rect {
  position: absolute;
  width: 130px; /* 小矩形宽度 */
  height: 30px; /* 小矩形高度 */
  background-color: #e34234; /* 红色 */
}

.rect-top {
  top: -0.5px; /* 将小矩形向上移动更靠近蓝色正方形顶部 */
  left: 400px; /* 将小矩形稍微往右调整 */
}

.rect-bottom {
  bottom: -0.5px; /* 将小矩形向下移动更靠近蓝色正方形底部 */
  left: 80px; /* 将小矩形稍微往左调整 */
}