#work #intro { --headerHeight: 4em; --navHeight: 4em; color: #fff; padding: 0; display: flex; flex: 1; background-image: url('/images/backgrounds/ffflux1.svg'); background-size: cover; background-position: center; .container { display: grid; grid-template-rows: auto auto 1fr; position: relative; padding: 1em; background-image: url('/images/puzzlehead.svg'); background-size: contain; background-position-x: right; background-position-y: bottom; background-repeat: no-repeat; aspect-ratio: 1; max-height: calc(100vh - var(--header-height) - var(--nav-height)); max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height)); @media (min-width: $container-width) { max-height: calc(100vh - var(--header-height)); max-height: calc(var(--vh) * 100 - var(--header-height)); } } .tagline { font-size: 1.5em; font-weight: 700; em {color: #76ff03;font-style: italic;} margin-bottom: 0.5em; line-height: 1.1; } .blurb { font-size: 1.1em; margin-bottom: 2em; max-width: 38ch; line-height: 1.4; } .button { background: #06f; color: white; width: max-content; svg { width: 1.75em; height: 1.75em; margin: 0; } span { display: none; font-size: 1.25em; } border-radius: 100em; @include box-shadow; justify-self: start; align-self: start; position: absolute; bottom: 1em; right: 1em; } @media (max-width: $container-width) { @media (min-height: 25em) { .tagline { font-size: clamp(1.5em,6vw,3em) } .blurb { font-size: clamp(1.1em, 3vw, 1.25em) } } @media (min-height: 31.25em) { @media (min-width: 32em) { .button { position: revert; span {display: block;} padding: 1em 2em; } aspect-ratio: 7.7/7; } @media (min-width: 37.5em) { aspect-ratio: 640 / 540 } @media (min-width: 40em) { aspect-ratio: 720 / 600 } @media (min-width: 42.5em) { aspect-ratio: 744 / 600 } @media (min-width: 50em) { aspect-ratio: 800 / 620 } @media (min-width: 52.5em) { aspect-ratio: 840 / 640 } @media (min-width: 55em) { aspect-ratio: 880 / 640 } } } @media (min-width: $container-width) { @media (min-height: 25em) { .tagline {font-size: 3em} .blurb {font-size: 1.25em} .button { position: revert; span {display: block;} padding: 1em 2em; } max-height: 46em; } @media (min-height: 40em) { .tagline {margin-top: 1em;} } } }