.site-header{border-bottom:0}main{position:relative}#hero-content{padding:80px 0;position:relative;z-index:100;max-width:600px;margin-inline:auto;& h1 { text-wrap: balance; font-weight: 600; line-height: 1.3; } & a.button:before { content: '\f002'; font-family: "Font Awesome 6 Sharp"; font-weight: 400; margin-right: 8px; } @media screen and (min-width: 600px){ padding: 140px 0; } @media screen and (min-width: 1024px){ padding: 180px 0; }}.hero-image{position:absolute;top:0;left:0;width:100%;height:100%;& img { block-size: 100%; inline-size: 100%; object-fit: cover; object-position: center; z-index: 80; position: relative; } &:after { content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.25) 100%); z-index: 90; }}