.dpp-lessonbox {
border: solid 1px #f4f4f4;
padding: 25px 30px;
background-color: #fafafa;
font-size: .9em;
margin-bottom: 20px;
margin-top: 30px;
clear: both;
}
.dpp-lessonbox__title {
color: #ABCF15;
margin-bottom: 15px;
}
.dpp-lessonbox__desc {
margin-top: 10px;
}
.dpp-lessonbox__desc ul li { padding-bottom: 0 !important; }
.dpp-lessonbox__field {
margin-bottom: 5px;
}
.dpp-lessonbox__field i {
font-size: 1.2em;
width: 25px;
text-align: center;
}
.dpp-lessonbox__field i.fa-clock-mdc { font-size: 1.5em; position: relative; top: 3px;  }
.dpp-lessonbox__grid {
display: grid;
grid-template-columns: 40% 60%;
}
.dpp-lessonbox__image {
padding-right: 25px;
}
.dpp-lessonbox__type {
position: absolute;
background-color: rgba(0,0,0,.3);
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: .8em;
padding: 1px 8px;
}
.dpp-lessonbox__field .title {
font-weight: 500;
text-transform: uppercase;
font-size: .9em;
}
@media screen and (max-width: 600px) {
.dpp-lessonbox { padding: 25px 20px; }
.dpp-lessonbox__grid { grid-template-columns: 100%; }
.dpp-lessonbox__image { padding-right: 0; padding-bottom: 10px; }
.dpp-lessonbox__desc { display: none; }
}
@media screen and (min-width: 500px) {
.dpp-lessonrow__grid {
display: grid;
grid-column-gap: 1em;
}
.dpp-lessonrow__grid.dpp-lessonrow__grid--two{
grid-template-columns: 50% 50%;
}
.dpp-lessonrow__grid.dpp-lessonrow__grid--three {
grid-template-columns: 33% 33% 33%;
}
.dpp-lessonrow__grid .dpp-lessonbox__image { padding-right: 0; }
.dpp-lessonrow__grid .dpp-lessonbox__title { font-size: 24px; line-height: 29px; margin-top: 10px; }
.dpp-lessonrow__grid .dpp-lessonbox__grid { display: block; }
.dpp-lessonrow__grid .dpp-lessonbox__desc { display: none; }
.dpp-lessonrow__grid--stencil .dpp-lessonbox__desc { display: block; }
}