/* engagementgroups */

.group-list{
 display: flex;
 flex-flow: wrap;
}
.group-list section{
 width: calc((100% - 15px)/3);
 margin-left: 7px;
 margin-bottom: 30px;
 background-color: rgba(204, 204, 204, 0.2);
}
.group-list section:nth-of-type(3n+1){
 margin-left: 0;
}
.group-list section h3{
 margin: 0;
 padding: 10px 25px;
 background-color: #06c;
 color: #fff;
 font-size: 1.2em;
}
.group-list section .group-box{
 display: flex;
 padding: 15px 25px;
 font-size: 0.8em;
}
.group-list section .group-box > figure{
 margin: 0;
 width: 80px;
 margin-right: 25px;
}
.group-list section .group-box > figure img{
 width: 100%;
 background-color: #fff;
}
.group-list section .group-box > figure+.group-detail{
 width: calc(100% - 105px);
}
.group-list section .group-box .group-detail p{
 margin: 0.5em 0;
}
.group-list section .group-box .group-detail a:hover{
 text-decoration: none;
}
.group-list section .group-box .group-detail a:after{
 content: "";
 display: block;
 height: 0;
}
.group-list section .group-box .group-detail figure{
 margin: 10px 0;
}
.group-list section .group-box .group-detail figure img:not(.external-link):not(.icon-pdf){
 width: 100%;
}
.group-list section .group-box .group-detail figure figcaption{
 margin-top: 5px;
 font-size: 85%;
 line-height: 1.5;
}

@media (max-width: 800px) {
 .group-list,
 .group-list section .group-box{
  display: block;
 }
 .group-list section{
  width: 100%;
  margin-left: 0;
  margin-bottom: 20px;
 }
 .group-list section .group-box figure{
  margin: 0 auto 10px auto;
 }
 .group-list section .group-box figure+.group-detail{
  width: 100%;
 }
}