.project { padding: 0 5rem; line-height: 1.5; img { display: block; max-width: 100%; height: auto; margin: 6em auto 0 auto; } .hero { width: calc(100% + 8em); max-width: none; padding: 2.5rem 0 2rem 0; margin: 0 0 0 -4em; } h1 { color: $f-color; font-size: 1.2rem; font-weight: 500; margin: 0 0 .25rem; opacity: .8; } h2 { display: block; font-size: 1.75rem; font-weight: 600; line-height: 2rem; padding-right: 12%; margin: 0 0 2rem; } hr { height: 1px; margin: 1.5rem auto; border: none; color: $fd-color; background-color: $fd-color; } label { position: relative; display: block; font-size: 1rem; color: $f-color; margin: 1rem 0 0 2rem; opacity: .6; span { position: absolute; top: 3px; left: -24px; font-size: .95rem; } .icon-link { top: 5px; transform: rotate(135deg); } } a, p { color: $f-color; font-size: 1.15rem; font-weight: 600; margin: 0 0 0 2rem; } a { text-decoration: none; &:hover { text-decoration: underline; } } } .content { padding: 0 5rem 8rem; img { width: 100%; max-width: none; margin: 2rem 0 0 0; } em { display: block; font-size: 14px; text-align: center; margin: 0 0 2rem 0; opacity: .6; } h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.3px; line-height: 26px; margin: 40px 0 0; scroll-margin-top: 4.6em; a { color: $f-color; text-decoration: none; } } p { color: $f-color; font-size: 1.05rem; line-height: 26px; margin-top: 16px; } } #yourgames h2 { padding-right: 24% } @media only screen and (max-width: 600px) { .project { padding: 0 2rem; .hero { width: calc(100% + 2em); margin: 0 0 0 -1em; } h2 { font-size: 1.50rem; line-height: 1.85rem; padding-right: 2rem; } } .content { padding: 0 2rem 4rem; } }