.hero {
margin: 3.75rem auto 0; min-height: 16.25rem; width: 100%; position: relative; background-color: #dde5ea; background-repeat: no-repeat; background-position: 50%; background-size: cover; @include breakpoint($lg) { margin: 0 auto; height: 36em; } &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 56, 81, .8); }
}
.hero–small {
margin: 3.75rem auto 0; min-height: 8.75rem; width: 100%; position: relative; background-color: $dark-light; @include breakpoint($lg) { height: 12.5em; } &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 56, 81, .8); }
}
.hero__wrap {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: rgba(255, 255, 255, 0.8); width: 100%; max-width: 90%; z-index: 1; @include breakpoint($md) { max-width: 40em; } .hero__title { font-size: 1.8em; color: $bg-color; @include breakpoint($md) { font-size: 2.625em; line-height: 3.125rem; } }
}
.page-content {
max-width: 52.5rem; margin: 0 auto; padding: 2.5em 0; @include breakpoint($md) { padding: 3.75rem 0; }
}
.blog {
background-color: #f9f9f9;
}
.post-list {
padding-top: 2.5em; display: flex; flex-wrap: wrap; flex: 1 0 auto; @include breakpoint($md) { padding-top: 5em; }
}