diff --git a/_includes/media-heroimg-2.html b/_includes/media-heroimg-2.html
new file mode 100644
index 0000000..500f383
--- /dev/null
+++ b/_includes/media-heroimg-2.html
@@ -0,0 +1,51 @@
+
+
+
+
+ {% if include.caption %}
+
{{ include.caption }}
+ {% endif %}
+
\ No newline at end of file
diff --git a/_sass/template/components/_component--media-heroimg-2.scss b/_sass/template/components/_component--media-heroimg-2.scss
new file mode 100644
index 0000000..487b3f1
--- /dev/null
+++ b/_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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/activities/bsswf/index.md b/activities/bsswf/index.md
index a9c30bd..fb07dff 100644
--- a/activities/bsswf/index.md
+++ b/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
diff --git a/activities/bsswio/index.md b/activities/bsswio/index.md
index 472e1d9..e1a49ec 100644
--- a/activities/bsswio/index.md
+++ b/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
diff --git a/activities/ideas-ecp/index.md b/activities/ideas-ecp/index.md
index f394206..809b415 100644
--- a/activities/ideas-ecp/index.md
+++ b/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
diff --git a/activities/ideas-watersheds/index.md b/activities/ideas-watersheds/index.md
index 2156985..c01866e 100644
--- a/activities/ideas-watersheds/index.md
+++ b/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
diff --git a/activities/xsdk/index.md b/activities/xsdk/index.md
index aa67d6a..6b6f72c 100644
--- a/activities/xsdk/index.md
+++ b/activities/xsdk/index.md
@@ -11,12 +11,8 @@ blurb: "Extreme-scale Scientific Software Development Kit"
-{% 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"
%}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 76bbabf..972e7bd 100644
--- a/assets/css/main.scss
+++ b/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',
diff --git a/assets/images/hero-bssw.png b/assets/images/hero-bssw.png
new file mode 100644
index 0000000..3536bf5
Binary files /dev/null and b/assets/images/hero-bssw.png differ
diff --git a/assets/images/hero-ecp.png b/assets/images/hero-ecp.png
new file mode 100644
index 0000000..65c73d6
Binary files /dev/null and b/assets/images/hero-ecp.png differ
diff --git a/assets/images/hero-fellowship.png b/assets/images/hero-fellowship.png
new file mode 100644
index 0000000..0f95509
Binary files /dev/null and b/assets/images/hero-fellowship.png differ
diff --git a/assets/images/hero-watersheds.png b/assets/images/hero-watersheds.png
new file mode 100644
index 0000000..6d6954c
Binary files /dev/null and b/assets/images/hero-watersheds.png differ
diff --git a/assets/images/hero-xsdk.png b/assets/images/hero-xsdk.png
new file mode 100644
index 0000000..96b4545
Binary files /dev/null and b/assets/images/hero-xsdk.png differ