.container {
  display: grid;
  height: 100vh; /* 뷰포트의 높이만큼 설정하여 풀 스크린 레이아웃을 구현합니다. */
  grid-template-rows: 1fr; /* 행 기준으로 정의하고, 비율을 1로 설정합니다. */
  grid-template-columns: repeat(3, 1fr); /* 열을 3개로 정의하고, 비율을 1로 설정합니다. */
}

.item1 {
  grid-column: 1 / span 2; /* 첫 번째 그리드 아이템은 열 1부터 2까지 차지합니다. */
  grid-row: 1; /* 첫 번째 그리드 아이템은 첫 번째 행에 배치합니다. */
}

.item2 {
  grid-column: 3; /* 두 번째 그리드 아이템은 세 번째 열에 배치합니다. */
  grid-row: 1; /* 두 번째 그리드 아이템은 첫 번째 행에 배치합니다. */
}

.item3 {
  grid-column: 1 / -1; /* 세 번째 그리드 아이템은 1번 열부터 마지막 열까지 차지합니다. */
  grid-row: 2; /* 세 번째 그리드 아이템은 두 번째 행에 배치합니다. */
}

.container {
  background-image: url('background.jpg'); /* 배경 이미지를 설정합니다. */
  background-size: cover; /* 배경 이미지를 컨테이너에 맞게 조정합니다. */
  align-items: center; /* 아이템을 수직 가운데로 정렬합니다. */
  justify-content: center; /* 아이템을 수평 가운데로 정렬합니다. */
}

.item {
  text-align: center; /* 아이템의 내용을 가운데로 정렬합니다. */
}