#welcome span.app-name { font-weight: 500; color: inherit; } #welcome .welcome, #welcome .pagetop, #welcome .issues { margin: 3.2rem auto; } #welcome [class$="-col-text"] > .flex__content { margin: 5%; text-align: center; } #welcome [class$="-col-image"] > .flex__content { margin: 1rem 5%; } #welcome .welcome > .flex__item { border-radius: 28px; background: url("/base/images/welcome.jpg") center center no-repeat; background-size: auto; background-size: cover; color: #fff; } #welcome .welcome > .flex__item > .flex__content { margin: 2rem 1rem; text-align: center; color: #fff; } #welcome .welcome > .flex__item > .flex__content > h2 { color: #fff; } #welcome .welcome > .flex__item > .flex__content > h3 { color: #ccc; } #welcome .promo-col-image > .flex__content { padding: 0 5%; } #welcome .issues-col-image > .flex__content img { border-radius: 40px; } /* BREAKPOINTS */ /* MD - Applies > 768px */ @media screen and (min-width: 48.0625rem) { #welcome .hello-world { margin-top: 2rem; } #welcome .promo-col-image > .flex__content { padding: 0; } #welcome .issues-col-text > .flex__content { text-align: left; } } /* LG - Applies > 992px */ @media screen and (min-width: 62.0625rem) { #welcome .hello-col-text > .flex__content { text-align: left; } #welcome .promo-col-text > .flex__content { margin-right: 0; text-align: right; } } /* XL - Applies > 1280px */ @media screen and (min-width: 80.0625rem) { #welcome .hello-col-text > .flex__content { margin-left: 20%; } #welcome .pagetop-col-text > .flex__content { text-align: left; } }