<div class="container">
    <h1 class="title">Lorem ipsum dolor sit.</h1>
    <div class="fluid-wrapper">
        <img class="image" src="https://unsplash.com/photos/6lF8Cv3cd2s/download?ixid=MnwxMjA3fDB8MXxhbGx8NDJ8fHx8fHwyfHwxNjcyODMxODM0&force=true&w=1920" alt="">
    </div>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum perspiciatis tempora vero voluptate minus sint debitis adipisci porro, voluptates a corporis aliquid ea molestias aperiam deserunt, soluta, accusamus quidem culpa.</p>
    <p class="text">Quae eligendi atque ea, sapiente voluptatibus voluptatum sunt fugit amet totam porro, voluptate eaque maxime iure vel repudiandae quibusdam exercitationem quas quam a placeat, doloremque excepturi esse distinctio est. Modi.</p>
    <p class="text">Reprehenderit iure numquam tenetur modi ad porro asperiores, alias dolore cupiditate. Voluptates qui voluptatum, quas enim nulla quisquam autem totam, repellendus consequuntur dolore dolorum velit veritatis facilis eaque, error nesciunt.</p>
</div>

:root {
    --max-width: 600px;
    --margin: calc((100vw - var(--max-width, 100vw)) / 2);
}

body {
    margin: 0;
    font-size: 18px;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}

.container {
    gap: 24px;
    padding: 32px 0;
    margin: 0 var(--margin);
    display: grid;
    grid-auto-rows: max-content;
}

.fluid-wrapper {
    margin: 0 calc(var(--margin) * -1);
}

.title,
.text {
    margin: 0;
}

.image {
    width: 100%;
    height: 320px;
    display: block;
    object-fit: cover;
}