consul/website/source/assets/stylesheets/consul-connect/components/_hero.scss

62 lines
1.0 KiB
SCSS

.g-hero {
background: url("/assets/images/consul-connect/hero-bg.png") no-repeat top
center;
background-size: cover;
margin-top: -94px;
padding: 126px 40px 56px;
text-align: center;
@media (min-width: 768px) {
padding: 154px 56px 96px;
}
@media (min-width: 992px) {
padding-top: 214px;
padding-bottom: 120px;
}
h1 {
margin: 0 0 16px;
}
p {
font-size: 1.8rem;
max-width: 848px;
margin: 0 auto 40px;
@media (min-width: 768px) {
font-size: 2rem;
}
@media (min-width: 992px) {
font-size: 2.4rem;
}
}
span {
border: 1px solid #ca2171;
border-radius: 2px;
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 20px;
margin-bottom: 24px;
padding: 2px 9px;
text-transform: uppercase;
@media (min-width: 992px) {
margin-bottom: 16px;
}
}
.g-btn {
min-width: 144px;
padding: 10px;
& + .g-btn {
margin-left: 20px;
}
}
}