ARTICLE AD BOX
I'm trying to reproduce a hero/header like this screenshot: a large left blue block with stacked white text "BUILDING / BLOCKS", a subheading under it ("Developing Strong Management"), and a diagonal-trimmed image panel on the right. See attached image. 
I created an example using USWDS base CSS and a clip-path to make the diagonal right panel, but it isn't behaving as expected, the image alignment/cropping doesn't match the design. I suspect the grid/USWDS container sizing or the clip-path polygon coordinates are the issue.
The example uses a free Unsplash image (so others can load it): https://unsplash.com/photos/group-of-people-having-a-meeting-VBLHICVh-lI
:root {
--brand-blue: #59b6d9;
--accent-blue: #0b6fb0;
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
/* Hero layout */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 280px;
align-items: center;
overflow: hidden;
background: white;
}
/* Left side */
.hero-left {
padding: 2rem;
}
.blue-strip {
background: var(--brand-blue);
display: inline-block;
padding: 1rem 1.25rem;
}
.big {
color: white;
font-size: 3.5rem;
font-weight: 800;
line-height: 0.9;
font-family: Georgia, serif;
}
.subheading {
margin-top: 1.5rem;
}
.subheading h2 {
margin: 0;
font-size: 1.8rem;
color: var(--accent-blue);
font-family: Georgia, serif;
}
/* Right diagonal image */
.hero-right {
min-height: 280px;
background-image: url("https://picsum.photos/1200/800");
background-size: cover;
background-position: center right;
/* Diagonal effect */
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
/* Larger screens */
@media (min-width: 768px) {
.big { font-size: 5rem; }
.subheading h2 { font-size: 2.4rem; }
.hero { min-height: 360px; }
.hero-right {
clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
}
/* Small screens */
@media (max-width: 600px) {
.hero {
grid-template-columns: 1fr;
}
.hero-right {
clip-path: none; /* problem area */
height: 200px;
background-position: center;
}
.big { font-size: 2.2rem; }
<header class="hero">
<div class="hero-left">
<div class="blue-strip">
<div class="big">BUILDING</div>
<div class="big">BLOCKS</div>
</div>
<div class="subheading">
<h2>Developing Strong<br>Management</h2>
</div>
</div>
<div class="hero-right"></div>
</header>
