/*Images with caption*/
div.img {border:1px solid #f1f1f1; border-radius: 6px; box-shadow: 0 0 2rem 0 rgba(136,152,170,.15); padding:6px; }
div.card {border-radius: 16px; padding:24px;}

.w100 {max-width:100px}
.w200 {max-width:200px}
.w300 {max-width:300px}
.w400 {max-width:400px}
.w500 {max-width:500px}
.w600 {max-width:600px}
.w700 {max-width:700px}
.w800 {max-width:800px}

@media (max-width:400px) {
    .w100 {max-width: 100%;}
    .w100.left, .w100.right { float: unset; }
    .w100.left, .w100.right, .w100.middle { margin:0; margin-bottom: 24px; }
}
@media (max-width:500px) {
    .w200 { max-width: 100%; }
    .w200.left, .w200.right { float: unset; }
    .w200.left, .w200.right, .w200.middle { margin:0; margin-bottom: 24px; }
}
@media (max-width:600px) {
    .w300 { max-width: 100%; }
    .w300.left, .w300.right { float: unset; }
    .w300.left, .w300.right, .w300.middle { margin:0; margin-bottom: 24px; }
}
@media (max-width:700px) {
    .w400 { max-width: 100%; }
    .w400.left, .w400.right { float: unset; }
    .w400.left, .w400.right, .w400.middle { margin:0; margin-bottom: 24px; }
}
@media (max-width:800px) {
    .w500 { max-width: 100%; }
    .w500.left, .w500.right { float: unset; }
    .w500.left, .w500.right, .w500.middle { margin:0; margin-bottom: 24px; }
}
@media (max-width:900px) {
    .w600 { max-width: 100%; }
    .w600.left, .w600.right { float: unset; }
    .w600.left, .w600.right, .w600.middle { margin:0; margin-bottom: 24px; }
}

/*.img img {width: 100%;}*/
.img .caption {font-style:italic; font-size: 0.8em; color:#808080;margin-top:10px; }

.left {float:left; margin:0 20px 20px 0;}
.right {float:right; margin:0 0 20px 20px;}
.middle {transform:none; margin:0 auto 20px auto;}

ul {
    word-break: break-all;
}