.layout-card {

/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */

& {

//@extend .container;
width: 34em;

}

content {

background-color: white;
text-transform: uppercase;

}

/* Small devices (tablets, 768px and up) */ @media (min-width: $screen-sm-min) {

& {

    // https://www.w3.org/Style/Examples/007/center
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#content {
    @include paper;

    width: 34em;
    height: 20.8em;

    font-size: 1em;
    //transform: rotate(-2deg);
}

}

/* 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) { }

}