Skip to content

Instantly share code, notes, and snippets.

@Andy-set-studio
Created May 26, 2022 13:29
Show Gist options
  • Save Andy-set-studio/6e1c18818038b941b9cba9f3c821b8c9 to your computer and use it in GitHub Desktop.
Save Andy-set-studio/6e1c18818038b941b9cba9f3c821b8c9 to your computer and use it in GitHub Desktop.
.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