Adjusting my image to fit within a column (grid).

    <div class="container">
        <header class="header">Header</header>
        <div class="image-container">
            <img src="image.png" alt="Sample Image" class="image-content">
        </div>
        <div class="text">This is some text below the image.</div>
    </div>
</body>

    <div class="container">
        <header class="header">Header</header>
        <div class="image-container">
            <img src="image.png" alt="Sample Image" class="image-content">
        </div>
        <div class="text">This is some text below the image.</div>
    </div>
</body>

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-template-areas:
        "header header header header header header header header header header header header"
        ". . . . . . . . . . . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
        "text text text text text text text text text text text text";
    width: 100%;
    text-align: center;
}

.header {
    grid-area: header;
    background-color: #f8f9fa;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-container {
    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-content {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* Ensures the image scales proportionally */
}

.text {
    grid-area: text;
    padding: 20px;
    background-color: #f1f1f1;
    width: 100%;
}

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-template-areas:
        "header header header header header header header header header header header header"
        ". . . . . . . . . . . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . image image image image image image image image . ."
        ". . . . . . . . . . . ."
        ". . . . . . . . . . . ."
        "text text text text text text text text text text text text";
    width: 100%;
    text-align: center;
}

.header {
    grid-area: header;
    background-color: #f8f9fa;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-container {
    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-content {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* Ensures the image scales proportionally */
}

.text {
    grid-area: text;
    padding: 20px;
    background-color: #f1f1f1;
    width: 100%;
}