CodePen Embed - QNA q/1087980

<div class="page">
    <div class="page__top">
        <div class="page__media">
            <img src="https://dummyimage.com/400x400/0ac700/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/0081c7/ffffff" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/c7b300/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/8b00c7/ffffff" alt="" class="page__image">
        </div>
        <p class="page__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quae, dignissimos in quia tempore architecto, doloremque eaque, debitis eum recusandae facilis error adipisci eius corporis. Provident fuga dolorum blanditiis, quod odit et veniam dignissimos vitae similique at perspiciatis commodi ut! Dolorum facilis impedit molestias? Ad aperiam amet earum laudantium quia quae perferendis impedit eum odio vero. Quam ducimus voluptate, consequuntur fugit magni nisi rem provident dolores minus repellat nostrum maxime, nihil ut eos quidem optio corrupti sed blanditiis, animi temporibus labore! Voluptates voluptate repellat tempore nam eos odit, tenetur quasi quas error at assumenda, neque architecto. Hic explicabo ad voluptatem!</p>
    </div>
    <div class="page__bottom">
        <div class="page__media"><img src="https://dummyimage.com/800x800/00c785/ffffff" alt="" class="page__image"></div>
        <p class="page__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime optio debitis magni dolore amet, dolores quia at rem temporibus reiciendis eligendi dolor iste veritatis excepturi, minima tenetur perspiciatis eveniet? Aut tenetur dolor esse veniam odit minus suscipit fugiat adipisci iusto alias, quis, repudiandae saepe laboriosam, temporibus quaerat ut reiciendis commodi porro doloremque tempora expedita eius facere neque! Incidunt fugit dolores reiciendis repudiandae nulla iusto veritatis, cupiditate, nobis, doloremque aliquid a voluptatem officiis hic rem mollitia!</p>
    </div>
</div>
<div class="page">
    <div class="page__top">
        <div class="page__media">
            <img src="https://dummyimage.com/400x400/0ac700/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/0081c7/ffffff" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/c7b300/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/8b00c7/ffffff" alt="" class="page__image">
        </div>
        <p class="page__text">Maxime minus ratione commodi, tenetur provident quod voluptate at blanditiis ipsum culpa recusandae minima inventore velit aliquam et asperiores quibusdam corrupti totam dignissimos officiis suscipit hic magnam! Nulla veritatis vero amet quam ipsum inventore sequi eveniet dignissimos doloribus nisi et, earum ab officiis saepe odit, molestias magni nobis cum ratione eos eius! Id temporibus delectus expedita illo fugiat, asperiores suscipit cumque! Dolore perspiciatis harum hic molestiae consequuntur. Illo officia ipsam at et ex quas accusamus quo distinctio libero dolor optio, aut architecto quae dolorum natus nemo tenetur a officiis voluptatem animi magni nisi dolore expedita saepe. Itaque expedita a voluptatum.</p>
    </div>
    <div class="page__bottom">
        <div class="page__media"><img src="https://dummyimage.com/800x800/00c785/ffffff" alt="" class="page__image"></div>
        <p class="page__text">Ipsum neque iusto, omnis autem mollitia aut, facere, ex dolore maiores asperiores enim quam! Magnam nihil architecto beatae mollitia, libero sequi illo excepturi odio unde ullam pariatur odit quis, repudiandae molestias vel placeat quidem. Tempore et voluptatibus eum velit itaque, placeat ex temporibus minus sint deleniti excepturi consequuntur ab. Praesentium harum dolorem dignissimos modi, ratione laborum et quia eligendi incidunt aliquam, repellat, veniam consectetur vel officia rem. Quae, facere. A ipsam quas quidem cum animi.</p>
    </div>
</div>
<div class="page">
    <div class="page__top">
        <div class="page__media">
            <img src="https://dummyimage.com/400x400/0ac700/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/0081c7/ffffff" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/c7b300/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/8b00c7/ffffff" alt="" class="page__image">
        </div>
        <p class="page__text">Quod architecto odit maiores voluptatum cumque repellat. Eos, dolore similique. Esse quis animi omnis voluptate consectetur! Totam vitae harum suscipit eveniet blanditiis aut velit provident, corporis dolor mollitia exercitationem dolorem quo deleniti, ad neque placeat pariatur est fuga consectetur sit iure? Fugiat, assumenda adipisci quasi officia quisquam in quos ea ipsam cumque aliquid itaque blanditiis ducimus a, iusto est et distinctio aliquam temporibus quas nostrum saepe sed! Assumenda commodi animi architecto iusto ratione officia beatae repellendus. Minus praesentium atque magni inventore. Maxime veniam repellendus cum, quidem labore eveniet maiores ut. Quia iste id hic est? Dolores distinctio assumenda debitis laboriosam?</p>
    </div>
    <div class="page__bottom">
        <div class="page__media"><img src="https://dummyimage.com/800x800/00c785/ffffff" alt="" class="page__image"></div>
        <p class="page__text">Quasi doloribus fugiat quas perspiciatis quo iure eveniet magni quam eos reprehenderit nihil quidem facere praesentium, accusamus officiis, ipsum laboriosam incidunt, itaque blanditiis. Sed, maiores ex quam voluptatibus hic cumque? Temporibus repellendus quam illo assumenda, saepe molestiae? Dolores officiis vero autem? Possimus veritatis unde ex culpa nulla laudantium cupiditate suscipit vitae ea dolorem? Blanditiis quidem aspernatur exercitationem dignissimos voluptatum ad, unde similique quasi at dolore eum impedit assumenda excepturi vitae aperiam ea. Quia, quaerat error!</p>
    </div>
</div>
<div class="page">
    <div class="page__top">
        <div class="page__media">
            <img src="https://dummyimage.com/400x400/0ac700/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/0081c7/ffffff" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/c7b300/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/8b00c7/ffffff" alt="" class="page__image">
        </div>
        <p class="page__text">Vel, eveniet quam veritatis porro eos animi sunt excepturi sequi provident iure temporibus id officia exercitationem. Doloribus, reprehenderit. Beatae ea expedita blanditiis quos rem quam modi earum saepe voluptatum, alias provident iste ipsam nemo fugit, eum dignissimos doloremque error porro. Nesciunt est odit consequatur voluptatibus blanditiis repudiandae enim, nobis, aut illum molestias dolor obcaecati distinctio, ea aperiam? Recusandae nostrum placeat labore, cumque, odit aperiam unde magni incidunt qui tenetur officia. Sequi, magnam in quod suscipit esse dolores a, ipsum repellendus cum perspiciatis repudiandae odit sint at voluptates provident reprehenderit nam voluptatibus nulla consectetur odio ea quos harum! Repudiandae, dolore dolorem?</p>
    </div>
    <div class="page__bottom">
        <div class="page__media"><img src="https://dummyimage.com/800x800/00c785/ffffff" alt="" class="page__image"></div>
        <p class="page__text">Assumenda, repellat dignissimos nostrum vel pariatur quidem laudantium amet. Quos maxime commodi laudantium possimus fugiat est natus reiciendis? Veritatis beatae consectetur doloremque error laboriosam in possimus. Doloribus debitis, cupiditate voluptas, temporibus nisi excepturi esse ad ipsum amet animi natus necessitatibus hic? Aperiam tempore, quos facere veniam saepe itaque atque magnam quia maxime labore modi debitis quis eius dolorum illo odio aspernatur? Vel accusamus quia molestiae atque. Eveniet placeat asperiores veritatis sunt maiores exercitationem explicabo repudiandae!</p>
    </div>
</div>
<div class="page">
    <div class="page__top">
        <div class="page__media">
            <img src="https://dummyimage.com/400x400/0ac700/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/0081c7/ffffff" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/c7b300/000000" alt="" class="page__image">
            <img src="https://dummyimage.com/400x400/8b00c7/ffffff" alt="" class="page__image">
        </div>
        <p class="page__text">Nisi porro, quam modi ducimus hic officia ad veniam, sed quas accusantium distinctio odio, assumenda veritatis dolores id voluptates amet! Vel eligendi necessitatibus adipisci eum ullam omnis corrupti dicta soluta nam natus, animi non aliquam velit quia, aut sequi ducimus optio harum? Tempora, nemo. Sequi ad aliquid nobis, sunt nisi laudantium velit veritatis impedit error adipisci asperiores id perferendis, ab sit totam obcaecati. Voluptates perferendis architecto consequatur sit totam dicta quisquam, deserunt deleniti iusto, recusandae natus? Corrupti maiores neque facere, magni odio sapiente harum quaerat? Distinctio, vero corrupti doloremque ducimus incidunt, atque asperiores temporibus, harum rem velit excepturi impedit eius.</p>
    </div>
    <div class="page__bottom">
        <div class="page__media"><img src="https://dummyimage.com/800x800/00c785/ffffff" alt="" class="page__image"></div>
        <p class="page__text">Accusantium unde, eaque animi dignissimos sit cupiditate minus perferendis saepe commodi labore quasi nihil asperiores nesciunt aut accusamus molestiae omnis odio? Nulla, ipsa, recusandae modi repudiandae autem velit ex id suscipit eius nemo nihil, est doloremque quia atque repellendus placeat non. Excepturi, ea similique? Minus animi iusto dicta nisi, temporibus facere odio totam dolores, natus rem culpa et voluptatem debitis id illo repudiandae. Ullam deleniti non dolor harum nisi odit quas sapiente alias repellat temporibus.</p>
    </div>
</div>

<!-- (.page>(.page__top>(.page__media>img.page__image[src="https://dummyimage.com/400x400/0ac700/000000"]+img.page__image[src="https://dummyimage.com/400x400/0081c7/ffffff"]+img.page__image[src="https://dummyimage.com/400x400/c7b300/000000"]+img.page__image[src="https://dummyimage.com/400x400/8b00c7/ffffff"])+p.page__text>lorem100)+(.page__bottom>(.page__media>img.page__image[src="https://dummyimage.com/800x800/00c785/ffffff"])+p.page__text>lorem75))*5 -->

:root {
    --spacing: 16px;
}

body {
    margin: 0;
    padding: calc(var(--spacing) * 2) 0;
    font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.page {
    padding: 0 calc(var(--spacing) * 10);
}

.page__top,
.page__bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.page__top .page__media,
.page__top .page__text,
.page__bottom .page__media,
.page__bottom .page__text {
    grid-row: 1 / -1;
}

.page__top .page__media {
    gap: calc(var(--spacing) * 3);
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.page__top .page__text {
    grid-column: 2 / 3;
}

.page__bottom .page__media {
    grid-column: 2 / 3;
}

.page__bottom .page__text {
    grid-column: 1 / 2;
}

.page__media {
    overflow: hidden;
}

.page__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.page__text {
    margin: 0;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    text-align: justify;
    line-height: 1.5;
}

@media (max-width: 1650px) {
    :root {
        --spacing: 12px;
    }
}

@media (max-width: 1366px) {
    :root {
        --spacing: 10px;
    }
}

@media (max-width: 1280px) {
    :root {
        --spacing: 8px;
    }
}

@media (max-width: 1024px) {
    :root {
        --spacing: 4px;
    }
}

This Pen is owned by Seasle on CodePen.

See more by @Seasle on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.