/* 使容器充滿整個視窗 */
html,
body {
  height: 100%;
  margin: 0;
}

/* 設定 grid 容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px; /* 每個區塊之間的間距 */
  height: 100vh;
  width: 100vw;
}

/* 每個 section 的樣式 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover; /* 確保背景圖片覆蓋整個容器 */
  background-position: center;
}

.section1 {
  background: linear-gradient(to bottom, white, pink);
}

.section2 {
  background: linear-gradient(
    to bottom right,
    white 20%,
    /* 白色區域佔 20% */ pink 50%,
    /* 粉紅色漸變到 50% */ lightblue 100% /* 粉藍色直到結束 */
  );
}

.section3 {
  background: linear-gradient(195deg, white 60%, pink);
}

.section4 {
  background: linear-gradient(
      to left top,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0) 70%
    ),
    url("https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg") no-repeat center center /
      cover;
}

.section5 {
  background: url("https://codefictionist.com/assets/images/logo-white-5d1024ae24f7dd517ec2750931e42d82.png")
      no-repeat right bottom / cover,
    url("https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg") no-repeat center center /
      cover;
}