Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.cutout-hero {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
position: relative;
aspect-ratio: 1920/839;
}
.cutout-hero :is(img, picture, video) {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.cutout-hero__heading {
font-size: var(--size-mega);
width: min-content;
line-height: 1;
transform: translateY(0.8ex);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment