.content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.page-image {
    flex: 0 0 400px;
    width: 400px;
    max-width: 100%;
    height: auto;
}

.page-text {
    flex: 1;
}
@media (max-width: 768px) {

    .content {
        flex-direction: column;
    }

    .page-image {
        width: 100%;
        max-width: 100%;
    }
}
<!-- refined css -->
.page-image {
    flex: 0 0 400px;
    width: 400px;
    max-width: 100%;
    height: auto;
}
That preserves the feel of the original site. On a 27-inch monitor, a 400px photo beside readable-width text often looks better than a giant 1200px-wide image.

You can also control whether the image is on the left or right simply by changing the order of the elements in the HTML.

<!-- associated html -->
<div class="content">

    <img src="first_to_go.jpg" class="page-image" alt="">

    <div class="page-text">
        <p>Clearly the hideous aluminum awning...</p>

        <p>With considerable sweat but much glee...</p>
    </div>

</div>