/* =========================================================
   CONTENT MEDIA COLUMNS
========================================================= */

.content-media-columns {
  position: relative;

  width: 100%;

  overflow: hidden;

  background-color: #F5FBEC;

  box-sizing: border-box;
}


.content-media-columns,
.content-media-columns *,
.content-media-columns *::before,
.content-media-columns *::after {
  box-sizing: border-box;
}


/* =========================================================
   INNER
========================================================= */

.content-media-columns__inner {
  position: relative;

  max-width: 1400px;
  width: 100%;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.content-media-columns__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  width: 100%;

  min-width: 0;

  align-items: start;
}


/* =========================================================
   HEADLINE / COPY
========================================================= */

.content-media-columns__copy {
  position: relative;

  width: 100%;

  min-width: 0;

  order: 1;
}


.content-media-columns__heading {
  width: 100%;

  max-width: 680px;

  margin-top: 0;

  color: #003B72;

  line-height: 1.1;

  text-wrap: balance;
}


.content-media-columns__intro {
  width: 100%;

  max-width: 680px;

  color: #001D39;

  line-height: 1.55;
}


.content-media-columns__intro p {
  margin-top: 0;
}


.content-media-columns__intro p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   CENTERED COPY
   USED WHEN CONTENT COLUMNS ARE EMPTY
========================================================= */

.content-media-columns__copy--centered {
  width: 100%;

  text-align: center;
}


.content-media-columns__copy--centered
.content-media-columns__heading {
  margin-left: auto;
  margin-right: auto;
}


.content-media-columns__copy--centered
.content-media-columns__intro {
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   SUPPORTING COLUMNS WRAPPER
========================================================= */

.content-media-columns__columns {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 24px;

  width: 100%;

  min-width: 0;

  order: 3;
}


/* =========================================================
   SUPPORTING COLUMN
========================================================= */

.content-media-columns__column {
  width: 100%;

  min-width: 0;
}


.content-media-columns__column-title {
  width: 100%;

  margin-top: 0;

  color: #003B72;

  line-height: 1.15;

  overflow-wrap: anywhere;
}


.content-media-columns__column-copy {
  width: 100%;

  color: #001D39;

  line-height: 1.55;

  overflow-wrap: anywhere;
}


.content-media-columns__column-copy p {
  margin-top: 0;
}


.content-media-columns__column-copy p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   MEDIA ROW
========================================================= */

.content-media-columns__media-row {
  position: relative;

  width: 100%;

  min-width: 0;

  order: 2;
}


/* =========================================================
   MEDIA CARD
========================================================= */

.content-media-columns__media-card {
  position: relative;

  width: 100%;

  overflow: hidden;

  box-sizing: border-box;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.content-media-columns__image-wrap {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-width: 0;
}


/* =========================================================
   IMAGE
========================================================= */

.content-media-columns__image {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  margin-left: auto;
  margin-right: auto;

  object-fit: contain;

  object-position: center;
}


/* =========================================================
   VIDEO
========================================================= */

.content-media-columns__video {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background-color: #001D39;

  border-radius: 16px;
}


.content-media-columns__video iframe {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  opacity: 1;

  visibility: visible;
}


/* =========================================================
   DESKTOP
   1024PX+
========================================================= */

@media screen and (min-width: 1024px) {

  /*
   * WITH COLUMNS:
   *
   * [ HEADLINE / COPY | COLUMN 1 + COLUMN 2 ]
   *
   * [       FULL WIDTH IMAGE / VIDEO        ]
   *
   *
   * WITHOUT COLUMNS:
   *
   * [          CENTERED HEADLINE            ]
   * [           CENTERED COPY               ]
   *
   * [       FULL WIDTH IMAGE / VIDEO        ]
   */


  /* =======================================================
     MAIN GRID
  ======================================================= */

  .content-media-columns__layout {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(0, 1fr);

    column-gap: 80px;

    row-gap: 32px;

    align-items: start;
  }


  /* =======================================================
     HEADLINE / COPY
  ======================================================= */

  .content-media-columns__copy {
    grid-column:
      1
      /
      2;

    grid-row:
      1;

    order: initial;

    width: 100%;

    max-width: 700px;

    padding-right: 16px;
  }


  /* =======================================================
     CENTERED COPY
     NO CONTENT COLUMNS
  ======================================================= */

  .content-media-columns__copy.content-media-columns__copy--centered {
    grid-column:
      1
      /
      -1;

    grid-row:
      1;

    width: 100%;

    max-width: none;

    padding-right: 0;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }


  .content-media-columns__copy--centered
  .content-media-columns__heading {
    margin-left: auto;
    margin-right: auto;
  }


  .content-media-columns__copy--centered
  .content-media-columns__intro {
    margin-left: auto;
    margin-right: auto;
  }


  /* =======================================================
     COLUMN 1 / COLUMN 2
  ======================================================= */

  .content-media-columns__columns {
    grid-column:
      2
      /
      3;

    grid-row:
      1;

    order: initial;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 27px;

    width: 100%;

    margin-top: 0;
  }


  /* =======================================================
     FULL WIDTH MEDIA
  ======================================================= */

  .content-media-columns__media-row {
    grid-column:
      1
      /
      -1;

    grid-row:
      2;

    order: initial;

    width: 100%;

    margin-top: 0;
  }


  .content-media-columns__media-card {
    width: 100%;

    border-radius: 24px;
  }

}


/* =========================================================
   TABLET
   BELOW 1024PX
========================================================= */

@media screen and (max-width: 1023px) {

  /*
   * ORDER:
   *
   * 1. HEADLINE / COPY
   * 2. IMAGE / VIDEO
   * 3. COLUMN 1 / COLUMN 2
   */

  .content-media-columns__layout {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap: 0;
  }


  /* =======================================================
     HEADLINE
  ======================================================= */

  .content-media-columns__copy {
    order: 1;

    width: 100%;

    max-width: 760px;
  }


  /* =======================================================
     CENTERED COPY
  ======================================================= */

  .content-media-columns__copy.content-media-columns__copy--centered {
    max-width: none;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }


  .content-media-columns__copy--centered
  .content-media-columns__heading {
    margin-left: auto;
    margin-right: auto;
  }


  .content-media-columns__copy--centered
  .content-media-columns__intro {
    margin-left: auto;
    margin-right: auto;
  }


  /* =======================================================
     MEDIA
  ======================================================= */

  .content-media-columns__media-row {
    order: 2;

    width: 100%;
  }


  /* =======================================================
     COLUMNS
  ======================================================= */

  .content-media-columns__columns {
    order: 3;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 32px;

    width: 100%;
  }


  .content-media-columns__media-card {
    padding: 32px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 767px) {

  .content-media-columns__copy {
    max-width: none;
  }


  .content-media-columns__heading {
    max-width: none;
  }


  .content-media-columns__intro {
    max-width: none;
  }


  /* =======================================================
     CENTERED COPY
  ======================================================= */

  .content-media-columns__copy.content-media-columns__copy--centered {
    width: 100%;

    max-width: none;

    text-align: center;
  }


  /* =======================================================
     IMAGE / VIDEO
  ======================================================= */

  .content-media-columns__media-row {
    margin-top: 32px;
  }


  .content-media-columns__media-card {
    padding: 20px;
  }


  .content-media-columns__video {
    border-radius: 14px;
  }


  /* =======================================================
     CONTENT COLUMNS
  ======================================================= */

  .content-media-columns__columns {
    grid-template-columns:
      repeat(
        1,
        minmax(0, 1fr)
      );

    gap: 24px;

    margin-top: 32px;
  }


  .content-media-columns__column {
    min-width: 0;
  }


  .content-media-columns__column-title {
    overflow-wrap: anywhere;
  }


  .content-media-columns__column-copy {
    overflow-wrap: anywhere;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

  .content-media-columns__columns {
    gap: 16px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 360px) {

  .content-media-columns__columns {
    gap: 12px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  .content-media-columns *,
  .content-media-columns *::before,
  .content-media-columns *::after {
    scroll-behavior: auto !important;
  }

}