// Page .page { margin-bottom: 20px; } .page-image-box { background: $black; &.reveal-in { .page-image { opacity: 1; } } } .page-image { min-height: 230px; margin-bottom: 30px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: $black; box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25); opacity: 0; transition: all 1s cubic-bezier(0.6, 0.3, 0, 1); &:after { content: ""; display: table; width: 100%; padding-top: 50%; } } .page-content { padding: 40px 15px; box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25); background: rgba($blue-darken, .95); } .page-head { padding-bottom: 30px; .page-title { font-size: 28px; text-align: center; font-weight: normal; line-height: 28px; margin-bottom: 0; } } .page-head, .page-body { margin-bottom: 20px; border-bottom: 1px solid $border-color; } .page-body { padding-bottom: 20px; } @media only screen and (min-width: 576px) { .page-content { padding: 40px; } .page-head { .page-title { font-size: 43px; line-height: 43px; margin-bottom: 10px; } } }