:root {
      --box-y-padding: 4rem;
      --box-x-padding: 2rem;
      --gradient-box-top: #f1d0c9;
      --gradient-box-bottom: #f1c5de;
    }

    @media screen and (min-width:1px) and (max-width: 430px){
      :root{
    --layout-width: 270px;
    --box-y-padding: 1rem;
    --box-x-padding: .5rem;

      }
    }

    @media screen and (min-width:431px) and (max-width: 650px){
      :root{
    --layout-width: 400px;
    --box-y-padding: 1rem;
      }
    }

    @media screen and (min-width:651px) and (max-width: 900px){
      :root{
    --layout-width: 600px;
    --box-y-padding: 1.5rem;
      }
    }
   
  .wrapper-layout{
    background:  linear-gradient(180deg, #fff 0%, #e6bbd3 77%, #fff 100%);
    padding-top: 3rem;
    padding-bottom: 3rem;
    z-index: -99;
  }
  /* ------------------------------------------------------------------------- */
  
  
    .layout {
      display: grid;    
      grid-template-columns: 1fr 3fr 4fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas: '. . title' 'img img content' 'img img .';
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 1rem;
      z-index: 1;
    }
  
    .layout::after {
      content: '';
      grid-column: 2/-1;
      grid-row: 1/3;  
      background: linear-gradient(140deg, #fff 0%, var(--gradient-box-top) 50%, var(--gradient-box-bottom) 100%);
      box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
      position: relative;
    }


    .layout-reverse {
      display: grid;    
      grid-template-columns: 4fr 3fr 1fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas: 'title . .' 'content img img' '. img img';
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 1rem;
      z-index: 1;
    }
  
    .layout-reverse::after {
      content: '';
      grid-column: 1/-2;
      grid-row: 1/3;  
      background: linear-gradient(240deg, #fff 0%, var(--gradient-box-top) 50%, var(--gradient-box-bottom) 100%);
      box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
      position: relative;
    }


    .layout-h1 {
      grid-area: title;
      padding-top: var(--box-y-padding);
      padding-left: var(--box-x-padding);
      font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
      font-size: calc(15px + 1vw);
      margin: 0 0 2rem;
      position: relative;
      z-index: 99;
    }
  
    .layout-h1::after {
      left: var(--box-x-padding);
      top: var(--box-y-padding);
    }
   
    .content {
      grid-area: content;
      padding-bottom: var(--box-y-padding);
      padding-left: var(--box-x-padding);
      padding-right: var(--box-x-padding);
      color: #313131;
      margin-top: 0;
      margin-bottom: var(--box-y-padding);
      z-index: 99;
      font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
      font-size: calc(12px + 0.8vw);
      line-height: 1.7;
    }
      
  
    .layout-img {
      grid-area: img;
      position: relative;
      z-index: 99;
    }
    
    .layout-img img {
      max-width: 100%;
      vertical-align: middle;
      box-shadow: 0 0.2rem 0.7rem rgba(61,48,41,0.7);
    }
  
  /* ------------------------------------------------------------------ */
  

  @media screen and (min-width:1px) and (max-width: 900px) {
    .layout, .layout-reverse {
        display: grid;    
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 
        'img'
        'title'
        'content';
        max-width: var(--layout-width);
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 3rem;
        padding: 3rem 1rem;
        position: relative;
        z-index: 99;
        background: linear-gradient(130deg, #fff 0%, var(--gradient-box-top) 50%, var(--gradient-box-bottom) 100%);
        box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
      }

      .layout-reverse::after {
        grid-column: -1/-1;
      }

      .layout-h1 {
        grid-area: title;
        padding-top: var(--box-y-padding);
        padding-left: var(--box-x-padding);
        font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
        font-size: calc(15px + 1vw);
        margin: 0 0 1rem;
        position: relative;
        z-index: 99;
      }
    
      .layout-h1::after {
        left: var(--box-x-padding);
        top: var(--box-y-padding);
      }
    
      .layout p {
        margin-top: 0;
        margin-bottom: var(--box-y-padding);
      }
    
      .content {
        grid-area: content;
        padding-bottom: var(--box-y-padding);
        padding-left: var(--box-x-padding);
        padding-right: var(--box-x-padding);
        color: #313131;
        margin-bottom: var(--box-y-padding);
        z-index: 99;
        font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
        font-size: calc(12px + 0.85vw);
        line-height: 1.6;
      }
    
      .layout-img {
        grid-area: img;
        position: relative;
        z-index: 99;
      }
      
      .layout-img img {
        max-width: 100%;
        vertical-align: middle;
        box-shadow: 0 0.2rem 0.7rem rgba(61,48,41,0.7);
      }
  }