2017-07-10 13:44:34 -07:00

35 lines
775 B
SCSS

/// Default width & height measure for feature card image
$feature-card-image-size: 50px !default;
.feature-card {
border-radius: 2px;
margin: 30px 0;
padding: 10px;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
&__title {
display: inline-flex;
color: set-color(blue, curious);
font-weight: fw(normal, 4);
font-size: 20px;
}
&__description {
color: set-color(black, dune);
}
/// Sets rules for displaying an image in a feature card component
&__image {
display: inline-flex;
width: $feature-card-image-size;
height: $feature-card-image-size;
object-fit: contain;
}
}
/// Wrap cards in containers with 1:1 ar
.feature-container {
@include aspect-ratio(1, 1);
}