<div class="container">
<h1>Pate Title</h1>
<p>Meaning that a low-fi sketch doesn’t represent all details of the design you’re working ons.Meaning that a low-fi sketch doesn’t represent all details of the design you’re working ons.</p>
<section class="full__bleed">
<img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" />
</section>
<p>Meaning that a low-fi sketch doesn’t represent all details of the design you’re working on, whereas a high-fi sketch is a muc.Meaning that a low-fi sketch doesn’t represent all details of the design you’re working ons.</p>
</div>
@font-face {
font-family: "Redacted";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/redacted-regular.woff2")
format("woff2");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: Redacted, sans-serif;
background-color: #557;
color: #fff;
line-height: 1.5;
font-size: clamp(1rem, 1.2rem + 1vw, 1.25rem);
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center;
vertical-align: middle;
}
.container {
--limit-max-container-width: 65ch;
--limit-min-container-width: 23ch;
--gutter: 1rem;
display: grid;
grid-template-columns:
1fr clamp(
var(--limit-min-container-width),
100% - var(--gutter) * 2,
var(--limit-max-container-width)
)
1fr;
gap: var(--gutter);
}
.container > * {
grid-column: 2;
}
.container .full__bleed {
width: 100%;
grid-column: 1 / -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.