• dcr-keisnu is the block for this specific section on the Guardian architecture webpage.
• There are other child elements: dcr-f9aim1 , dcr-2yd10d, dcr-iuk5cr.
• Class-based modifier : dcr-keisnu, dcr-o47zbl, dcr-zigv41.
• Data attribute modifiers : data-format-theme, data-format-design, data-format-display

<li class="dcr-keisnu">
    <div data-format-theme="3" data-format-design="0" data-format-display="0" class="dcr-o47zbl">
        <div class="dcr-f9aim1">
            <a href="/artanddesign/2025/feb/06/cardboard-house-designers-sanaa-win-riba-award"
                data-link-name="news | group-0 | card-@1"
                aria-label="Thin is the new thick: Japanese masters of minimalism win RIBA gold medal"
                class="dcr-2yd10d">
            </a>
            <div style="background-color:var(--card-background);row-gap:8px;column-gap:8px;" class="dcr-iuk5cr">
                <div class="dcr-1y4wqkl">
                    <picture data-size="small" class="dcr-zigv41">
                        <source
                            srcset="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=220&amp;dpr=2&amp;s=none&amp;crop=none"
                            media="(min-width: 980px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 980px) and (min-resolution: 120dpi)">
                        <source
                            srcset="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=220&amp;dpr=1&amp;s=none&amp;crop=none"
                            media="(min-width: 980px)">
                        <source
                            srcset="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=160&amp;dpr=2&amp;s=none&amp;crop=none"
                            media="(min-width: 740px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 740px) and (min-resolution: 120dpi)">
                        <source
                            srcset="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=160&amp;dpr=1&amp;s=none&amp;crop=none"
                            media="(min-width: 740px)">
                        <source
                            srcset="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=120&amp;dpr=2&amp;s=none&amp;crop=none"
                            media="(min-width: 320px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 320px) and (min-resolution: 120dpi)">
                        <source
                            srcset="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=120&amp;dpr=1&amp;s=none&amp;crop=none"
                            media="(min-width: 320px)"><img alt="Rolex Learning Center in Lausanne, Switzerland."
                            src="https://i.guim.co.uk/img/media/f53579b30e12b0a47ecdd52bfdcb1841f8746003/0_51_4928_2957/master/4928.jpg?width=120&amp;dpr=1&amp;s=none&amp;crop=none"
                            loading="lazy" data-chromatic="ignore" class="dcr-l300o4">
                    </picture>
                    <div class="image-overlay"></div>
                </div>
                <div class="dcr-1wfknh3">
                    <div class="dcr-vy6xhd">
                        <div class="dcr-147a5s0">
                            <h3 class="card-headline dcr-4ec2a0"><span class="show-underline dcr-uyefka">Thin is the new
                                    thick: Japanese masters of minimalism win RIBA gold medal</span></h3>
                        </div>
                        <footer class="dcr-udklzc"><a data-discussion-id="/p/xxffm9" data-ignore="global-link-styling"
                                data-link-name="Comment count"
                                href="/artanddesign/2025/feb/06/cardboard-house-designers-sanaa-win-riba-award#comments"
                                class="dcr-2z2e0g"><gu-island name="CardCommentCount" priority="feature"
                                    deferuntil="visible"
                                    props="{&quot;discussionApiUrl&quot;:&quot;https://discussion.theguardian.com/discussion-api&quot;,&quot;discussionId&quot;:&quot;/p/xxffm9&quot;}"
                                    data-island-status="hydrated">
                                    <div class="dcr-1vtfybo">
                                        <div class="dcr-1yci2yw"><svg width="16" height="16" viewBox="0 0 16 16">
                                                <path d="M13 0l1 1v7l-1 1H7l-2 3H4V9H2L1 8V1l1-1h11z"></path>
                                            </svg></div>
                                        <div class="dcr-1xg7t4s">23</div>
                                        <div aria-hidden="true" class="dcr-hv8aup">23</div><span class="dcr-194i6pr">
                                            comments</span>
                                    </div>
                                </gu-island></a></footer>
                    </div>
                    <div></div>
                </div>
            </div>
            <div style="padding:0px;" class="dcr-0"></div>
        </div>
    </div>
</li>

Inherited CSS Properties : The property takes the value from the it’s parent element.

• font-family :Inherited because that child elements follow the same font style as the parent, maintaining constant of typography. The child element can have different font-family, however by default it will have the parent element font style.
• text-align: is also inherited, because it maintain constant text alignment within a container or parent element and its children follow the same text alignment, unless the design format is different it can be change.

Non-Inherited CSS Properties : The property that can have its own value different from the it’s parent element.

• margin :The margin is non-inherited because, each element should control its own spacing or its siblings.
• width: The width is non-inherited because, it should only define its dimension or measurement based on its content, such as image, block and so on.

Differences between inline, block, and inline-block element

1. Inline element fit alongside other element. It also flow within the text and only take and up as much width as necessary.
2. Block element occupied entire element that they have available and create line breaks after and before them.
3. inline-block element allows to apply both width and height to an element and stay in the same line, as inline elements.

I would want to use the inline-block value, because it allows the programmer to control the size as needed, such as the width and height can be modified, unlike other display elements. Maintain proper spacing between elements without disorganizing the alignment of images, buttons, navigation bars, etc…

For the Natours project, the developer used the inline-block element only for the button, giving it padding, height, and width to control the size and alignment as desired.

Link to version-02(responsive units)

Link to version03(BEM)