consul/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss

67 lines
969 B
SCSS

.g-use-cases {
margin: 48px 0 8px;
@media (min-width: 768px) {
display: flex;
justify-content: center;
margin: 0 (-$site-gutter-padding);
}
img {
width: 51%;
@media (min-width: 768px) {
width: 80%;
}
}
h3 {
font-weight: 600;
margin: 40px 0 0;
span {
display: block;
font-weight: 300;
}
}
p {
margin-top: 0.5em;
@media (min-width: 768px) {
margin-top: 1em;
}
}
& > div {
padding: 0 16px;
position: relative;
text-align: center;
@media (min-width: 768px) {
padding: 0 $site-gutter-padding;
width: 33.33333%;
}
@media (min-width: 992px) {
display: flex;
flex-direction: column;
justify-content: space-between;
}
& + div {
margin-top: 56px;
@media (min-width: 768px) {
margin-top: 0;
}
}
}
.button {
@media (min-width: 768px) {
margin-top: 22px;
}
}
}