* {
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100%;
    padding: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 영역을 3등분하여 균등한 너비로 설정 (1fr: 남은 공간을 1 비율로 나눠 차지) */
    grid-template-rows: repeat(4, 200px);
    grid-gap: 1rem;
    grid-template-areas: 
        'a a a'
        'b c c'
        'b d g'
        'e f g';
}

.image1 { grid-area: a; }
.image2 { grid-area: b; }
.image3 { grid-area: c; }
.image4 { grid-area: d; }
.image5 { grid-area: e; }
.image6 { grid-area: f; }
.image7 { grid-area: g; }

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
    [ object-fit ]
    이미지나 영상 같은 대체 요소(media) 를 컨테이너 크기에 맞추어 채우되, 비율(비율 유지)을 유지한 상태로 잘라서(full bleed) 보여주는 방식
    이미지가 영역을 꽉 채우도록 확대 또는 축소하되, 화면 밖으로 일부 잘릴 수 있어도 비율은 유지한다.

    fill (default)  : 컨테이너에 강제로 맞춤 → 비율 깨질 수 있음 (늘어나거나 찌그러짐)
    contain         : 이미지 전체가 보여짐 → 여백이 생길 수 있음
    cover           : 컨테이너를 완전히 채움 → 일부 잘릴 수 있지만 비율 유지
    none            : 원본 크기 유지
    scale-down      : none 또는 contain 중 더 작은 값 사용
*/