/* Content w/ Lifestyles customizable root variables */
  :root {
      /* cwl = Content w/ Lifestyles */
    
      /* Accent Class */
      --hsd-mod-cwl-50-50-accent-background-color: #000;
      --hsd-mod-cwl-50-50-accent-text-color: #fff;
      --hsd-mod-cwl-50-50-accent-link-color: #fff;
    }
    
    /* Module Parent */
    .hsd-mod-content-w-lifestyle-50-50 {
      display: grid;
      grid-template-columns: 50% 50%;
      align-items: center;
      justify-items: center;
      max-width: 1440px;
      width: 100%;
      /* margin: 1rem auto; */
    }
    
    /* Image Cont */
    .hsd-mod-cwl-50-50-img {
      width: 100%;
      height: 100%;
    }
    .hsd-mod-cwl-50-50-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    /* Content Cont */
    .hsd-mod-cwl-50-50-content {
      margin: 1rem;
      padding: 4rem;
      box-sizing: border-box;
    }
    
    /*  ** Optional Classes ** */
    
    /* Reverse Class */
    /* (swaps image and content position when added) */
    .hsd-mod-cwl-50-50-reverse {
      grid-template-columns: 50% 50%;
    }
    .hsd-mod-cwl-50-50-reverse .hsd-mod-cwl-50-50-content {
      order: 1;
    }
    
    /* Accent styling */
    .hsd-mod-cwl-50-50-accent {
      color: var(--hsd-mod-cwl-50-50-accent-text-color);
      background-color: var(--hsd-mod-cwl-50-50-accent-background-color);
    }
    .hsd-mod-cwl-50-50-accent a {
      color: var(--hsd-mod-cwl-50-50-accent-link-color);
    }
    
    /* Split 1 image: stack two images vertically to look like one image */
    .hsd-mod-cwl-50-50-img--stacked {
      height: auto;
    }
    
    .hsd-mod-cwl-50-50-img--stacked img {
      display: block;
      width: 100%;
      height: auto !important;
      margin: 0;
      padding: 0;
    }
    
    /* Media Query for mobile */
    @media screen and (max-width: 767px) {
      /* Module Parent */
      .hsd-mod-content-w-lifestyle-50-50 {
        grid-template-columns: 1fr;
      }
    
      /* Content Cont */
      .hsd-mod-cwl-50-50-content {
        margin: 1rem;
        padding: 1rem;
      }
    
      /* Have the content above the image */
      .hsd-mod-content-w-lifestyle-50-50 .hsd-mod-cwl-50-50-content {
        order: 2;
      }
    }