html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
}

html, body {
    background-color: #f5f5f5;
}
aside {
    position: absolute;
    top: 0;
}
main {
    width: 1100px;
    max-width: 1100px;
    margin-bottom: 50px;
}
h1 {
    margin: 50px 0 10px -20px;
    padding: 5px 5px 7px 15px;
    border-left: 5px solid royalblue;
}
.example-container {
    position: relative;
    float: left;
    width: 33%;
    height: auto;
    z-index: 999;
}
.example {
    position: relative;
    width: 300px;
    height: 280px;
    margin: calc(50% - 152px);
    box-shadow: 1px 0 1px #aaa;
    border-radius: 3px;
    border: 1px solid #fff;
    background-color: #fff;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: .3s filter, .3s box-shadow;
    -webkit-transition: .3s -webkit-filter, .3s box-shadow;
}
.example:hover {
    box-shadow: 1px 0 1px #888;
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
.example-container:last-child {
    margin-bottom: 60px;
}
@media screen and (max-width: 1200px) {
    main {
        width: 700px;
        max-width: 700px;
    }
    .example-container {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    main {
        width: 300px;
        max-width: 300px;
    }
    .example-container {
        width: 100%;
        margin-top: 40px;
    }
}
.widget-container {
    display: block;
    width: 300px;
    height: 280px;
    padding: 20px;
}
.widget-name {
    width: 100%;
    height: 40px;
    font-family: 'Montserrat', 'Avenir Next', 'Helvetica Neue', 'Helvetica', sans-serif;
    color: #666;
    transition: .3s color;
}
.example:hover .widget-name {
    color: black;
    transition: .3s color;
}
.example a {
    color: black;
}
.widget {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    font-family: 'Montserrat', 'Avenir Next', 'Helvetica Neue', 'Helvetica', sans-serif;
    opacity: 0.3;
    transition: .3s opacity;
    -webkit-transition: .3s opacity;
}
.example:hover .widget {
    opacity: 1;
    transition: .3s opacity;
    -webkit-transition: .3s opacity;
}