a.ext-link {
    position: relative;
    height: 100%;
    text-decoration: none;
    color: #f8f9fa;
    cursor: pointer;
}

a.ext-link>div {
    position: relative;
    height: 100%;
    padding: 1rem 0;
}

.title {
    font-size: 1.25rem;
    text-transform: uppercase;
    line-height: 1;
    opacity: 1;
    position: relative;
}

.subtitle {
    color: #ced4da;
    font-size: .9rem;
    letter-spacing: .035rem;
    line-height: 1.125;
    margin: -.25rem 0 0;
    opacity: 0;
}

.wrapper .row {
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
}

.wrapper .row>div {
    height: 240px;
    overflow: hidden;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    transition-duration: 0.7s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.wrapper .row>div:before {
    background: rgba(33, 37, 41, 0.7);
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.wrapper .row:hover>div {
    flex-basis: calc(100% * 1/6);
    flex-basis: 16.66%;
    max-width: calc(100% * 1/6);
    max-width: 16.66%;
}

.wrapper .row .item-wrapper {
    flex-basis: calc(100% * 1/3);
    flex-basis: 33.33%;
    max-width: calc(100% * 1/3);
    max-width: 33.33%;
}

.wrapper .row .item-wrapper>div {
    height: 100%;
    position: relative;
}

.wrapper .row .item-wrapper>a>div {
    position: relative;
    height: 100%;
    padding: 1rem 0;
}

.wrapper .row .item-wrapper .description p {
    width: calc(100% * 2/3);
    margin-top: 0;
    margin-bottom: 0;
    padding: 1rem 0;
    opacity: 0;
}

.wrapper .row .item-wrapper .category-icon {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: auto;
    font-size: 0.79rem;
    color: #0DAFE0;
    display: flex;
    align-items: center;
    padding: .35rem;
    opacity: .7;
    filter: grayscale(50%);
}

.wrapper .row .item-wrapper .category-icon:after {
    content: '';
    display: block;
    margin-left: .5rem;
    background-repeat: no-repeat;
    -webkit-mask-image: url(https://mdbootstrap.com/img/Marketing/general/logo/small/mdb.png);
    mask-image: url(https://mdbootstrap.com/img/Marketing/general/logo/small/mdb.png);
    background-color: #0DAFE0;
    height: 20px;
    width: 21px;
}

.wrapper .row .item-wrapper:hover {
    flex-basis: calc(100% * 2/3);
    flex-basis: 66.66%;
    max-width: calc(100% * 2/3);
    max-width: 66.66%;
}

.wrapper .row .item-wrapper:hover .title {
    font-size: 1.953rem;
    color: #212529;
    text-shadow: none;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
}

.wrapper .row .item-wrapper:hover .subtitle {
    opacity: 1;
    color: #495057;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.wrapper .row .item-wrapper:hover .category-icon {
    opacity: 1;
    filter: grayscale(0%);
}

.wrapper .row .item-wrapper:hover .description p {
    opacity: 1;
    color: #212529;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.wrapper .row .item-wrapper:hover:before {
    background: rgba(248, 249, 250, 0.8) !important;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.container .row h4:first-of-type {
    text-align: center;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.wrapper .row:first-child> :nth-child(1) {
    background-color: #515272;
    background-image: url("http://natic.co/unknown.png");
    background-position: center center;
    background-size: cover;
}

.wrapper .row:first-child> :nth-child(2) {
    background-color: #6c3f31;
    background-image: url("http://natic.co/weather.png");
    background-position: center center;
    background-size: cover;
}

.wrapper .row:first-child> :nth-child(3) {
    background-color: #323119;
    background-image: url("http://natic.co/cubedodge.png");
    background-position: center center;
    background-size: cover;
}

.wrapper .row:last-child> :nth-child(1) {
    background-color: #5d92cb;
    background-image: url("http://natic.co/card.png");
    background-position: center center;
    background-size: cover;
}

.wrapper .row:last-child> :nth-child(2) {
    background: #e9ecef;
    background-image: url("http://www.natic.co/sketch.png");
    background-position: center center;
    background-size: cover;
}

.wrapper .row:last-child> :nth-child(3) {
    background-color: #112a3b;
    background-image: url("http://natic.co/course.png");
    background-position: center center;
    background-size: cover;
}