.project .head { padding: 0; margin: 0; .concept { padding: 6rem 0 4rem 0; .logo, .logo-small { margin: 0 auto; } .logo { display: block; max-width: 16rem; } .logo-small { display: none; max-width: 10rem; } h1 { color: var(--t-color); font-size: 2.75rem; font-weight: 800; line-height: 3.25rem; padding: 0; margin: 1rem 0 2.5rem 0; text-align: center; } .meta { width: fit-content; margin: 0 auto; a { display: inline-block; color: var(--t-color); font-size: 1rem; font-weight: 600; padding: .35rem 1.15rem .50rem 1.15rem; margin: 0 2rem 0 .15rem; padding-right: 2.4rem; border: .15rem solid var(--t-color); border-radius: .25rem; span { position: absolute; margin: .3rem 0 0 .45rem; } &:hover { background: rgba(#f1f4f6, .2) } } label { color: rgba(#f1f4f6, .9); font-size: .85rem; font-weight: 600; text-transform: uppercase; margin: 0 .5rem; } .stack { color: var(--t-color); font-weight: 600; display: inline-block; } } } .showcase { display: block; width: 100%; padding: 2rem 2rem 0 2rem; margin: 0 auto -.25rem auto; } } @media only screen and (min-width: 1566px) { .project .head { .showcase { max-width: 90rem; } } } @media only screen and (--viewport-4) { .project .head { .concept { padding: 4rem 0 4rem 0; h1 { font-size: 2rem; line-height: 2.5rem; margin: 1rem 2.25rem 2.5rem 2.25rem; br { display: none; } } .meta { width: 100%; padding: 0 2.25rem; a { display: block; text-align: center; padding: .35rem 1.15rem .50rem 1.15rem; margin: 0 0 1rem 0; span { display: none; } } } } .showcase { padding: 0; } } }