@media screen and (min-width:1024px) {
:root{
  --itemheight: 20rem;
  --imageheight: 16rem;
}                
             }
             @media screen and (max-width:1023px) {
 :root{
  --itemheight: 20rem;
  --imageheight: 16rem;
}               
             }


.emerald-item-grid {
  @media screen and (min-width:1024px) {
    padding: 3rem 0;                
  }
  @media screen and (max-width:1023px) {
    padding: 1.75rem;
    .container{
      width: 100%;
    }
  }

  .flexholder{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;    
    .item{
      margin-bottom: 1.5rem;
              @media screen and (min-width:992px) {
      min-height: var(--itemheight);            
            }
            @media screen and (max-width:991px) {
      min-height: var(--itemheight);
            }
        .flexholder-item{
          display: flex;
                justify-content: space-between;
                align-items: stretch;
                 @media screen and (max-width:1023px) {
    flex-direction: column-reverse;  
    margin-bottom: 1.5rem;              
                 }

          .text_side{
            @media screen and (min-width:992px) {
              width: 50%;  
              padding-right: 1rem;              
            }
            @media screen and (max-width:991px) {
              width: 100%; 
            }

            .excerpt{
              p{
                font-size: calc(.8rem + 0.1vw);
              }
            }

          }

          .image_side{
                        @media screen and (min-width:992px) {
              width: 50%;                
            }
            @media screen and (max-width:991px) {
              width: 100%; 
            }
            figure{

              height: 100%;
              width: 100%;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
             box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
              @media screen and (min-width:992px) {
      min-height: var(--imageheight); 
      border-top-right-radius: 15px;           
            }
            @media screen and (max-width:991px) {
      min-height: var(--imageheight);
      border-top-right-radius: 0px;
            }
            }
          }
        }

      &.item-1{
        @media screen and (min-width:992px) {
          width: calc(100% - 1rem);                
        }
        @media screen and (max-width:991px) {
          width: calc(100% - 1rem);
        }
      }
      &.item-2, &.item-halves{
        @media screen and (min-width:992px) {
          width: calc(50% - 1rem);                
        }
        @media screen and (max-width:991px) {
          width: calc(100% - 1rem);
        }
      }
        &.item-3,&.item-6,&.item-7,&.item-9,&.item-thirds{
        @media screen and (min-width:992px) {
          width: calc(33.333% - 1rem);                
        }
        @media screen and (max-width:991px) {
          width: calc(100% - 1rem);
        }

      }
        &.item-4,&.item-8,&.item-12,&.item-16,&.item-20, &.item-quarters{
        @media screen and (min-width:992px) {
          width: calc(25% - 1rem);                
        }
        @media screen and (max-width:991px) {
          width: calc(100% - 1rem);
        }
      }
        &.item-5,&.item-10, &.item-15,&.item-25,&.item-fifths{
        @media screen and (min-width:992px) {
          width: calc(20% - 1rem);                
        }
        @media screen and (max-width:991px) {
          width: calc(100% - 1rem);
        }
      }
    }
  }

}