:root {
      --box-y-padding: 4rem;
      --box-x-padding: 2rem;
      /* --gradient-box-top: #bbd2eb;
      --gradient-box-bottom: #e6cfe3; */
      --gradient-box-top: #e9c7c0;
      --gradient-box-bottom: #e0b6ce;
      --gradient-bigbox-top: #eeccc4;
      --gradient-bigbox-bottom: #e2abca;
      --gradient-background: #f0d8d2;
    }

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

    @media screen and (min-width:431px) and (max-width: 700px){
      :root{
    --layout-width: 400px;
    --box-y-padding: 1rem;
      }
    }
 
    .wrapper-layout{
    background: linear-gradient(#fff, var(--gradient-background), #fff);
    padding-top: 3rem;
    padding-bottom: 3rem;
    z-index: -9999;
  }
  
    .servicii-layout {
      display: grid;    
      grid-template-columns: 2.5fr 1fr 1fr;
      grid-template-rows: 130px 1fr 1fr;
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 1rem;
    }

     .servicii-layout-h1 {
      grid-row: 1;
      grid-column: 1 / 2;
      background: linear-gradient(var(--gradient-box-top), var(--gradient-box-bottom));
      font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
      font-size: clamp(.7rem, 3vw, 1.1rem);
      text-align: center;
      line-height: 45px;
      text-shadow: 1px 2px 5px rgb(102, 102, 102);
      letter-spacing: .2rem;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      display: grid;
      z-index: 99;
    }
      
    .servicii-content {
      grid-row: 2 / 4;
      grid-column: 1 / 2;
      padding-top: var(--box-x-padding);;
      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);
      font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
      font-size: clamp(.6rem, 3vw, 1.1rem);
      line-height: 2;
      background:linear-gradient(230deg,#f3e8fa 0%, var(--gradient-bigbox-top) 50%, var(--gradient-bigbox-bottom) 100%);
    }
  
    .servicii-layout-img {
      grid-row: 1 / 4;
      grid-column: 2 / 5;
      position: relative;
      object-fit: contain;
      z-index: 9;
    }
    
    .servicii-layout-img img, .servicii-layout-img-reverse img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      box-shadow: 0 0.2rem 0.7rem rgba(61,48,41,0.7);
    }
  
    .servicii-layout-reverse {
      display: grid;    
      grid-template-columns: 1fr 1fr 2.5fr;
      grid-template-rows: 130px 1fr 1fr;
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 1rem;
    }

    .servicii-content-reverse {
      grid-row: 2 / 4;
      grid-column: 3 / 4;
      padding-top: var(--box-x-padding);;
      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);
      font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
      font-size: clamp(.6rem, 3vw, 1.1rem);
      line-height: 2;
      background: linear-gradient(130deg,#f3e8fa 0%, var(--gradient-bigbox-top) 50%, var(--gradient-bigbox-bottom) 100%);
    }
  
    .servicii-layout-reverse-h1 {
      grid-row: 1;
      grid-column: 3 / 4;
      background: linear-gradient(var(--gradient-box-top), var(--gradient-box-bottom));
      font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
      font-size: clamp(.7rem, 3vw, 1.1rem);
      text-shadow: 1px 2px 5px rgb(102, 102, 102);
      letter-spacing: .2rem;
      line-height: 45px;
      text-align: center;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      display: grid;
      z-index: 99;
    }
  
    .servicii-layout-img-reverse {
      grid-row: 1 / 4;
      grid-column: 1 / 3;
      position: relative;
      object-fit: contain;
      z-index: 9;
    }


    /* ----- Media screen 750 px ---- */
    
    @media screen and (min-width:1px) and (max-width: 750px) {

      .servicii-layout, .servicii-layout-reverse {
        display: grid;    
        grid-template-columns: 1fr;
        grid-template-rows: .5fr 130px 1fr;
        max-width: var(--layout-width);
        margin-right: auto;
        margin-left: auto;
        padding: 3rem 1rem;
        }

        .servicii-layout-img, .servicii-layout-img-reverse {
          grid-row: 1 / 2;
          grid-column: 1;
          position: relative;
          object-fit: contain;
          z-index: 9;
        }

        .servicii-layout-h1, .servicii-layout-reverse-h1 {
          grid-row: 2 / 3;
          grid-column: 1;
          /* background: linear-gradient(var(--gradient-box-top), var(--gradient-box-bottom));
          font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
          font-size: clamp(.6rem, 3vw, 1rem);
          text-shadow: none;
          text-align: center;
          letter-spacing: .1rem;
          justify-content: center;
          align-items: center;
          text-transform: uppercase;
          display: grid;
          z-index: 99;
          box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5); */
        }

        .servicii-content, .servicii-content-reverse {
          grid-row: 3 / 4;
          grid-column: 1;
          /* padding-top: var(--box-x-padding);;
          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);
          font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
          line-height: 2; */
          font-size: clamp(.9rem, 3vw, 1.1rem);
          box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
        }
      }