.layout-card {
& {
text-transform: uppercase;
}
card {
@extend .container; background-color: white;
}
.card {
@include paper; width: 17em; height: 10.4em; font-size: 2em; transform: rotate(-2deg); ul.table-cell li { display: inline; } #card-motif { line-height: 1.1em; .left { width: 30.9%; text-align: right; } .middle { width: 38.2%; text-align: center; padding: 0 0.3em 0.1em 0.65em; padding: 0 0.1em 0 0.9em; } .right { width: 30.9%; text-align: left; } } a { border-bottom: 1px dotted lightgrey; text-decoration: none; } a:link, a:visited { color: black; } a:hover { border-color: darkgrey; } #card { font-size: 40%; .top { height: 3em; & > ul { text-align: right; padding: 0 1em; } a:link, a:visited { color: lightgrey; } a:hover { color: darkgrey; } } .bottom { height: 3em; & > div { text-align: center; padding: 0 1em; } } }
}
/* Small devices (tablets, 768px and up) */ @media (min-width: $screen-sm-min) {
#card { @include paper; margin-top: 2em; margin-bottom: 2em; }
}
/* Medium devices (desktops, 992px and up) */ @media (min-width: $screen-md-min) { }
/* Large devices (large desktops, 1200px and up) */ @media (min-width: $screen-lg-min) { }
}