.card-image
display: block
position: relative
- img
- display: block
- &.is-square,
- &.is-4x3,
- &.is-3x2
- img
- +overlay
- height: 100%
- width: 100%
- &.is-square
- padding-top: 100%
- &.is-4x3
- padding-top: 75%
- &.is-3x2
- padding-top: 66.6666%
.card-content
padding: 20px
$size-7: 11px
+$weight-title-normal: 300
+$weight-title-bold: 500
+
+// Breakpoints
+
+$tablet: 769px
+$desktop: 980px
+$widescreen: 1180px
+
// Dimensions
$column-gap: 20px
@import "notifications"
.box
+ @extend .block
background: white
border-radius: 5px
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
.title,
.subtitle
@extend .block
- font-weight: 300
- em
- font-weight: 300
+ font-weight: $weight-title-normal
+ em,
+ span
+ font-weight: $weight-title-normal
+ strong
+ font-weight: $weight-title-bold
a
&:hover
border-bottom: 1px solid
margin-top: -20px
strong
color: $text-strong
- font-weight: 400
code
border-radius: $radius
display: inline-block
-ms-user-select: none
user-select: none
-$tablet: 769px
-$desktop: 980px
-$widescreen: 1180px
-
=from($device)
@media screen and (min-width: $device)
@content