<!-- components/7-page-content/multimedia-grid-content.php --> <!-- _internal/_formats/legacy/_deprecate /Head Extra - Multimedia Grid --> <style type="text/css"> section#main { padding: 2.3em; } .grid { background: #f0f1f2; overflow: hidden; padding: 10px; width: 272px; box-sizing: content-box; } .grid figure { display: block; position: relative; overflow: hidden; float: left; width: 250px; height: 185px; margin: 10px; border: 1px solid #fff; background: #000; box-sizing: content-box; } .grid figure img { width: 250px; height: 185px; } .grid figcaption { position: absolute; background: #000; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px; margin: 0; opacity: 1; text-align: center; bottom: 0; left: 0; font-weight: 300; width: 230px; box-sizing: content-box; } .no-touch .grid figcaption { opacity: 0; bottom: -50%; } .grid figcaption .title { font-size: 16px; display: block; margin: 5px 0; } .grid figcaption .desc { font-size: 14px; display: block; margin: 5px 0; line-height: 16px; } .video-wrapper { border: none; height: 185px; width: 250px; } @media screen and (min-width: 720px) { .grid { width: 577px; padding: 18px 19px; } .grid figure { margin: 18px; } } @media screen and (min-width: 1000px) { .grid { width: 883px; padding: 21px 22px; max-width: none; } .grid figure { margin: 21px; } } </style> <?php outputElement("header", "1693 Scholars Photo Galleries"); ?> <div class="grid" style="margin: 20px auto 40px !important;"> <figure><a href="canoe_2018/index.php"><img alt="canoe2018_thumb" src="<?php echo $asset_url; ?>/as/1693scholars/galleries/canoe_thumb1.jpg"> <figcaption><span class="title">Freshmen Canoe Trip 2018</span></figcaption> </a></figure> <figure><a href="eastern_shore_murray/index.php"><img alt="esthumb" src="<?php echo $asset_url; ?>/as/1693scholars/galleries/esthumb.jpg"> <figcaption style="bottom: -50%; opacity: 0;"><span class="title">Eastern Shore trip November 2017</span></figcaption> </a></figure> <figure><a href="pumpkin_carving_2017/index.php"><img alt="pumpkinthumb" src="<?php echo $asset_url; ?>/as/1693scholars/galleries/thumb_pumpkin.jpg"> <figcaption><span class="title">Pumpkin Carving October 2017</span></figcaption> </a></figure> <figure><a href="canoe_2018/index.php"><img alt="canoe2018_thumb" src="<?php echo $asset_url; ?>/as/1693scholars/galleries/canoe_thumb1.jpg"> <figcaption><span class="title">Freshmen Canoe Trip 2018</span></figcaption> </a></figure> <figure><a href="eastern_shore_murray/index.php"><img alt="esthumb" src="<?php echo $asset_url; ?>/as/1693scholars/galleries/esthumb.jpg"> <figcaption style="bottom: -50%; opacity: 0;"><span class="title">Eastern Shore trip November 2017</span></figcaption> </a></figure> <figure><a href="pumpkin_carving_2017/index.php"><img alt="pumpkinthumb" src="<?php echo $asset_url; ?>/as/1693scholars/galleries/thumb_pumpkin.jpg"> <figcaption><span class="title">Pumpkin Carving October 2017</span></figcaption> </a></figure> </div>