Add "Panels" options to Tandem component

The new "Panels" Tandem includes the following options:

One required image or two required images
One optional "background" image
Option to choose background color
- If a scarlet background is chosen, image border is unl-b-gray
- If a lighter gray background is chosen, image border is unl-b-scarlet
Option to choose "bleed" or "wrapper" width

All options use the CMS grid used in several of the other components (including Tandem):

<style>

  @media only screen and (max-width: 42.09em) {

    .unlcms-grid-cols {
      grid-template-columns: 5.62vw 3.16rem 1rem 1fr 1fr 1.58vw 1.58vw 1fr 1fr 1rem 3.16rem 5.62vw;
    }

  }

  @media only screen and (min-width: 42.09em) and (max-width: 56.12em) {

    .unlcms-grid-cols {
      grid-template-columns: 5.62vw 3.16rem 1rem 1fr 1fr 1fr 1.58vw 1.58vw 1fr 1fr 1fr 1rem 3.16rem 5.62vw;
    }

  }

  @media only screen and (min-width: 56.12em) {

    .unlcms-grid-cols {
      grid-template-columns: 5.62vw 3.16rem 1rem 1fr 1fr 1fr 1fr 1rem 3.16rem 1.58vw 1.58vw 3.16rem 1rem 1fr 1fr 1fr 1fr 1rem 3.16rem 5.62vw;
    }

  }

</style>

CSS for 1 required image:

<style>

  .unlcms-tandem-panels-filter { filter: blur(1px) grayscale(1) opacity(.5); }
  .unlcms-tandem-panels-1img-bleed-bg { grid-area: 1 / 1 / -1 / -1; }

  /* max sm 673 */
  @media only screen and (max-width: 42.09em) {

    .unlcms-tandem-panels-1img-bleed-text { grid-area: 2 / 2 / 3 / -2; }
    .unlcms-tandem-panels-1img-bleed-img { grid-area: 4 / 5 / -2 / 10; }
    .unlcms-tandem-panels-1img-wrapper-text { grid-area: 2 / 2 / 3 / -2; }
    .unlcms-tandem-panels-1img-wrapper-img { grid-area: 4 / 5 / -2 / 10; }

  }

  /* min sm 673 and max md 898 */
  @media only screen and (min-width: 42.09em) and (max-width: 56.12em) {

    .unlcms-tandem-panels-1img-bleed-text { grid-area: 2 / 2 / 3 / 11; }
    .unlcms-tandem-panels-1img-bleed-img { grid-area: 4 / 9 / -2 / -3; }
    .unlcms-tandem-panels-1img-wrapper-text { grid-area: 2 / 2 / 3 / 11; }
    .unlcms-tandem-panels-1img-wrapper-img { grid-area: 4 / 9 / -2 / -3; }

  }

  /* min md 898 */
  @media only screen and (max-width: 56.12em) {

    .unlcms-tandem-panels-translate-xy { transform: translate(1rem, 1.33rem); }
    .unlcms-tandem-panels-1img-bleed-grid-rows { grid-template-rows: 3.16rem auto 2.37rem auto 2.37rem 3.16rem; }
    .unlcms-tandem-panels-1img-wrapper-grid-rows { grid-template-rows: 3.16rem auto 2.37rem auto 2.37rem 1.33rem; }
    .unlcms-tandem-panels-1img-wrapper-bg { grid-area: 1 / 3 / -3 / -1; }

  }

  /* min md 898 */
  @media only screen and (min-width: 56.12em) {

    .unlcms-tandem-panels-1img-bleed-grid-rows { grid-template-rows: 3.16rem 2.37rem auto 3.16rem; }
    .unlcms-tandem-panels-1img-wrapper-grid-rows { grid-template-rows: 3.16rem 2.37rem auto 1.78rem 2.37rem 3.16rem; }
    .unlcms-tandem-panels-1img-wrapper-bg { grid-area: 1 / 3 / -2 / -2; }

  }

  /* min md 898 and max lg 1197 */
  @media only screen and (min-width: 56.12em) and (max-width: 74.83em) {

    .unlcms-tandem-panels-translate-xy { transform: translate(1.78rem, 4.21rem); }
    .unlcms-tandem-panels-1img-bleed-text { grid-area: 2 / 2 / 4 / 13; }
    .unlcms-tandem-panels-1img-bleed-img { grid-area: 3 / 14 / -3 / -3; }
    .unlcms-tandem-panels-1img-wrapper-text { grid-area: 2 / 2 / 4 / 13; }
    .unlcms-tandem-panels-1img-wrapper-img { grid-area: 3 / 14 / -3 / -3; }

  }

  /* min lg 1197 */
  @media only screen and (min-width: 74.83em) {

    .unlcms-tandem-panels-translate-xy { transform: translate(2.37rem, 4.21rem); }
    .unlcms-tandem-panels-1img-bleed-text { grid-area: 2 / 2 / 4 / 10; }
    .unlcms-tandem-panels-1img-bleed-img { grid-area: 3 / 13 / -3 / -4; }
    .unlcms-tandem-panels-1img-wrapper-text { grid-area: 2 / 2 / 4 / 10; }
    .unlcms-tandem-panels-1img-wrapper-img { grid-area: 3 / 13 / -3 / -4; }

  }

}

</style>

CSS for 2 required images:

<style>

  .unlcms-tandem-panels-filter { filter: blur(1px) grayscale(1) opacity(.5); }
  .unlcms-tandem-panels-2img-bleed-bg { grid-area: 1 / 1 / -2 / -1; }
  .unlcms-tandem-panels-2img-bl { transform: translateX(-1px); }

  /* max xs 505 */
  @media only screen and (max-width: 31.57em) {

    .unlcms-tandem-panels-2img-img1 { grid-area: 5 / 4 / 4 / 10; }

  }

  /* min xs 505 and max sm 673*/
  @media only screen and (min-width: 31.57em) and (max-width: 42.09em) {

    .unlcms-tandem-panels-2img-img1 { grid-area: 4 / 5 / 5 / 10; }

  }

  /* max sm 673 */
  @media only screen and (max-width: 42.09em) {

    .unlcms-tandem-panels-2img-grid-rows { grid-template-rows: 3.16rem auto 1.78rem auto 2.37rem 1.33em auto 3.16rem 3.16rem; }
    .unlcms-tandem-panels-2img-bleed-text { grid-area: 2 / 2 / 3 / -2; }
    .unlcms-tandem-panels-2img-wrapper-text { grid-area: 1 / 2 / 3 / -2; }
    .unlcms-tandem-panels-2img-img2 { grid-area: 6 / 2 / -2 / 6; }

  }

  /* min sm 673 and max md 898 */
  @media only screen and (min-width: 42.09em) and (max-width: 56.12em) {

    .unlcms-tandem-panels-2img-grid-rows { grid-template-rows: 3.16rem auto 2.37rem auto 4.21rem auto 3.16rem 3.16rem 3.16rem; }
    .unlcms-tandem-panels-2img-bleed-text { grid-area: 2 / 2 / 3 / 11; }
    .unlcms-tandem-panels-2img-wrapper-text { grid-area: 1 / 2 / 3 / 11; }
    .unlcms-tandem-panels-2img-img1 { grid-area: 4 / 9 / -4 / -3; }
    .unlcms-tandem-panels-2img-img2 { grid-area: 4 / 4 / -2 / 7; }

  }

  /* min md 898 */
  @media only screen and (max-width: 56.12em) {

    .unlcms-tandem-panels-translate-xy { transform: translate(1rem, 1.33rem); }
    .unlcms-tandem-panels-2img-bl { grid-area: 5 / -2 / -1 / -1; }
    .unlcms-tandem-panels-2img-wrapper-bg { grid-area: 2 / 3 / -3 / -1; }

  }

  /* min md 898 */
  @media only screen and (min-width: 56.12em) {

    .unlcms-tandem-panels-2img-wrapper-bg { grid-area: 3 / 4 / -3 / -2; }
    .unlcms-tandem-panels-2img-bl { grid-area: 6 / 11 / -1 / 12; }

  }

  /* min md 898 and max lg 1197 */
  @media only screen and (min-width: 56.12em) and (max-width: 74.83em) {

    .unlcms-tandem-panels-translate-xy { transform: translate(1.78rem, 4.21rem); }
    .unlcms-tandem-panels-2img-grid-rows { grid-template-rows: 3.16rem 2.37rem auto 2.37rem 3.16rem auto 2.37rem 3.16rem; }
    .unlcms-tandem-panels-2img-bleed-text { grid-area: 3 / 2 / 4 / 13; }
    .unlcms-tandem-panels-2img-wrapper-text { grid-area: 1 / 2 / 4 / 13; }
    .unlcms-tandem-panels-2img-img1 { grid-area: 2 / 14 / -4 / -3; }
    .unlcms-tandem-panels-2img-img2 { grid-area: 5 / 5 / -2 / 9; }

  }

  /* min lg 1197 */
  @media only screen and (min-width: 74.83em) {

    .unlcms-tandem-panels-translate-xy { transform: translate(2.37rem, 4.21rem); }
    .unlcms-tandem-panels-2img-grid-rows { grid-template-rows: 3.16rem 2.37rem auto 2.37rem 3.16rem auto 7.49rem 2.37rem 3.16rem; }
    .unlcms-tandem-panels-2img-bleed-text { grid-area: 3 / 2 / 4 / 10; }
    .unlcms-tandem-panels-2img-wrapper-text { grid-area: 1 / 2 / 4 / 10; }
    .unlcms-tandem-panels-2img-img1 { grid-area: 2 / 13 / -4 / -4; }
    .unlcms-tandem-panels-2img-img2 { grid-area: 5 / 5 / -2 / 8; }

  }

</style>

Markup for 1 required image: (if "bleed" width is selected, classes with -wrapper- should be changed to -bleed-)

<div class="dcf-bleed dcf-d-grid unlcms-grid-cols unlcms-tandem unlcms-tandem-panels-1img-wrapper-grid-rows">
  <div class="unlcms-tandem-text unlcms-tandem-panels-1img-wrapper-text dcf-z-1">
    <div class="unl-bg-darkest-gray dcf-pt-8 dcf-pr-7 dcf-pb-8 dcf-pl-7">
      <header>
        <p class="unl-light-gray dcf-subhead dcf-bold">Really Big News</p>
        <h1 class="dcf-txt-h2 dcf-mt-0 unl-cream">Larry Howard Honored at National Association of County Agricultural Agents Annual Meeting</h1>
      </header>
      <p class="unl-cream">NACAA President Phil Durst (Michigan), presents the NACAA 2023 Hall of Fame award to North Central Region winner, Larry Howard, with wife Mary Howard.</p>
      <div class="dcf-d-flex dcf-flex-wrap dcf-gap-3 dcf-mt-5" role="group">
        <a class="dcf-btn dcf-btn-primary" href="#">Read More</a>
        <a class="dcf-btn dcf-btn-inverse-secondary" href="#">Read Even More</a>
      </div>
    </div>
  </div>
  <div class="unlcms-tandem-img unlcms-tandem-panels-1img-wrapper-img dcf-z-2">
    <div class="dcf-ratio dcf-ratio-1x1">
      <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucommphotos.unl.edu/photos/231007_Strong_Husker_005.jpg" alt="">
    </div>
  </div>
  <div class="unlcms-tandem-img unlcms-tandem-panels-1img-wrapper-img dcf-z-1">
    <div class="dcf-ratio dcf-ratio-1x1 unlcms-tandem-panels-translate-xy">
      <div class="dcf-ratio-child unl-b-gray dcf-b-2 dcf-b-solid"></div>
    </div>
  </div>
  <div class="unlcms-tandem-bg unlcms-tandem-panels-1img-wrapper-bg dcf-z-0">
    <div class="dcf-w-100% dcf-h-100% unl-bg-scarlet unl-bg-diagonal-gradient unl-bg-multiply">
    </div>
  </div>
</div>

Markup for 2 required image: (if "bleed" width is selected, classes with -wrapper- should be changed to -bleed-)

<div class="dcf-bleed dcf-d-grid unlcms-grid-cols unlcms-tandem unlcms-tandem-panels-2img-grid-rows">
  <div class="unlcms-tandem-text unlcms-tandem-panels-2img-wrapper-text dcf-z-1">
    <div class="unl-bg-darkest-gray dcf-pt-8 dcf-pr-7 dcf-pb-8 dcf-pl-7">
      <header>
        <p class="unl-light-gray dcf-subhead dcf-bold">Really Big News</p>
        <h1 class="dcf-txt-h2 dcf-mt-0 unl-cream">Larry Howard Honored at National Association of County Agricultural Agents Annual Meeting</h1>
      </header>
      <p class="unl-cream">NACAA President Phil Durst (Michigan), presents the NACAA 2023 Hall of Fame award to North Central Region winner, Larry Howard, with wife Mary Howard.</p>
      <div class="dcf-d-flex dcf-flex-wrap dcf-gap-3 dcf-mt-5" role="group">
        <a class="dcf-btn dcf-btn-primary" href="#">Read More</a>
        <a class="dcf-btn dcf-btn-inverse-secondary" href="#">Read Even More</a>
      </div>
    </div>
  </div>
  <div class="unlcms-tandem-img unlcms-tandem-panels-2img-img1 dcf-z-2">
    <div class="dcf-ratio dcf-ratio-1x1 dcf-overflow-visible">
      <img class="dcf-ratio-child dcf-obj-fit-cover" src="https://ucommphotos.unl.edu/photos/231007_Strong_Husker_005.jpg" alt="">
    </div>
  </div>
  <div class="unlcms-tandem-img unlcms-tandem-panels-2img-img1 dcf-z-1">
    <div class="dcf-ratio dcf-ratio-1x1 unlcms-tandem-panels-translate-xy">
      <div class="dcf-ratio-child unl-b-gray dcf-b-2 dcf-b-solid"></div>
    </div>
  </div>
  <div class="unlcms-tandem-img2 unlcms-tandem-panels-2img-img2 dcf-as-end dcf-z-2">
    <div class="dcf-ratio dcf-ratio-4x3">
      <img class="dcf-ratio-child dcf-obj-fit-cover dcf-obj-top" src="https://ucommphotos.unl.edu/photos/231007_Strong_Husker_011.jpg" alt="">
    </div>
  </div>
  <div class="unlcms-tandem-bl unlcms-tandem-panels-2img-bl dcf-z-1 dcf-bl-2 dcf-bl-solid unl-bl-scarlet">
  </div>
  <div class="unlcms-tandem-bg unlcms-tandem-panels-2img-wrapper-bg dcf-relative unl-bg-scarlet unl-bg-diagonal-gradient unl-bg-multiply">
    <img class="dcf-d-block dcf-absolute dcf-obj-fit-cover dcf-obj-top unlcms-tandem-panels-filter unl-soft-light" src="https://ucommphotos.unl.edu/photos/231007_Strong_Husker_004.jpg" alt="">
  </div>
</div>

unlcms / project-herbie

Add "Panels" options to Tandem component #703