new heros for activities

_includes/media-heroimg-2.html

@@ -0,0 +1,51 @@
+<!-- 
+
+MEDIA, HERO IMAGE 2 (no fixed proportions)
+
+-------------------------------------------------------------------------------
+
+available parameters:
+* source
+- contain
+- cover
+- scale
+- caption
+
+* required
+
+-------------------------------------------------------------------------------
+
+-->
+
+<div class="hero-img-2">
+	<div class="img-wrapper">
+		<div><img src="/assets/images/{{ include.source }}"
+			{% if include.cover %}
+				style="
+				width: 100%;
+				height: 100%;
+				object-fit: cover;"
+			{% elsif include.contain %}
+				style="
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+				{% if include.scale %}
+					max-height: calc( {{ include.scale }}% * 100 );
+					max-width: calc( {{ include.scale }}% * 100 );
+				{% endif %}	
+				"
+			{% else %}
+				style="object-fit: initial;
+				{% if include.scale %}
+					-ms-transform: translate(-50%, -50%) scale( {{ include.scale }} );
+					transform: translate(-50%, -50%) scale( {{ include.scale }} );
+				{% endif %}	
+				"
+			{% endif %}			
+		></div>
+	</div>
+	{% if include.caption %}
+	<small class="caption">{{ include.caption }}</small>
+	{% endif %}	
+</div>

_sass/template/components/_component--media-heroimg-2.scss

@@ -0,0 +1,32 @@
+/**
+  * Component: Media, Hero Image
+  *  
+  * @description
+  * -
+  */
+
+  .hero-img-2 {
+	@include grid-child($cols:12);
+
+	.img-wrapper {
+		// @include aspect-ratio(16, 9);
+		grid-column: 1 / -1;
+		@include stack(sm);
+		@include respond-to(m){
+			grid-column: 3 / 11;
+			@include stack(md);
+		}
+	}
+
+	img {
+	 	width: 100%;
+	}
+
+	.caption {
+		grid-column: 1 / -1;
+		@include stack(md);
+		@include respond-to(m){
+			grid-column: 3 / 11;
+		}
+	}
+}

activities/bsswf/index.md

@@ -7,12 +7,8 @@ blurb: "Providing recognition and funding to leaders and advocates of high-quali
 
 ---
 
-{% 	include media-img2x.html 
-	  source1 = "logos/bsswf/Logo_BSSw_Fellowship_428_550.png"
-	  contain1 = "true"
-      scale1 = "0.65"
-    source2 = "bsswf/OG_2308_BSSwFellowships_Closed.png"
-	contain2 = "true"
+{% 	include media-heroimg-2.html 
+	  source = "hero-fellowship.png"
 %}
 
 # About the BSSw Fellows Program

activities/bsswio/index.md

@@ -7,12 +7,8 @@ blurb: "A hub for scientific software development resources."
 
 ---
 
-{% 	include media-img2x.html 
-	  source1 = "logos/bssw/BSSw-logo-transparent.png"
-	  contain1 = "true"
-      scale1 = "0.65"
-    source2 = "bsswio/bssw-categories.jpeg"
-	contain2 = "true"
+{% 	include media-heroimg-2.html 
+	  source = "hero-bssw.png"
 %}
 
 # Developing scientific software should be a shared experience

activities/ideas-ecp/index.md

@@ -11,11 +11,8 @@ redirect_from:
   - /ideas-ecp/team/
 ---
 
-{% 	include media-img2x.html 
-	  source1 = "ideas-ecp/lightbulb-transparent.png"
-	  contain1 = "true"
-    source2 = "logos/ecp/ECP_logo.png"
-	contain2 = "true"
+{% 	include media-heroimg-2.html 
+	  source = "hero-ecp.png"
 %}
 
 # About the Exascale Computing Project

activities/ideas-watersheds/index.md

@@ -21,13 +21,8 @@ redirect_from:
   - /ideas-watersheds/job-postings/
 ---
 
-{% 	include media-img2x.html 
-	  source1 = "ideas-watersheds/IDEAS_watershed-logo_blueText.png"
-	  contain1 = "true"
-      scale1 = "0.85"
-     source2 = "ideas-watersheds/Pillars_hero.png"
-	 scale2 = "0.85"
-	contain2 = "true"
+{%  include media-heroimg-2.html 
+    source = "hero-watersheds.png"
 %}
 
 # Overview

activities/xsdk/index.md

@@ -11,12 +11,8 @@ blurb: "Extreme-scale Scientific Software Development Kit"
 <!-- Content -->
 <!-- ---------------------------------------------------------------------- -->
 
-{% 	include media-img2x.html 
-	  source1 = "xsdk/xsdk_logo_COLOR_large.png"
-	  contain1 = "true"	
-    source2 = "xsdk/use-case-collage.004-300x225.png"
-	contain2 = "true"
-    caption2 = "Integrated surface-subsurface hydrology simulations of river meanders require the combined use of xSDK packages."
+{% 	include media-heroimg-2.html 
+	  source = "hero-xsdk.png"
 %}
 
 

assets/css/main.scss

@@ -56,6 +56,7 @@
 	'template/components/component--list-6x',
 	'template/components/component--list-events',
 	'template/components/component--media-heroimg',
+	'template/components/component--media-heroimg-2',
 	'template/components/component--media-img',
 	'template/components/component--media-img2x',
 	'template/components/component--media-smimg',