/**
 * Dynoments 
 * Css File: Dynoments Grid Layout
 * Description: CSS file for the Dynoments Grid
 * Author:      Dynoments
 * Text Domain: dynoments
 */


  .dm-hide {
   display: none;
 }

 .dm-placeholder {
   display: block;
   padding: 20px;
   background-color:#fff;
   border-radius: 3px;
   color: #bdbdbd;
   font-style: italic;
   font-size: 0.9rem;
 }


.dm-dynoments-grid {
  display: grid;
  grid-column-gap: var(--dynoments-column-gap-desktop);
  grid-row-gap: var(--dynoments-row-gap-desktop);
  
}

    .dm-dynoments-grid.dm-1 {
     grid-template-columns: minmax(0,1fr);
    }  

    .dm-dynoments-grid.dm-2 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }

    .dm-dynoments-grid.dm-3 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    }    

    .dm-dynoments-grid.dm-4 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    }

    .dm-dynoments-grid.dm-5 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); 
    }   
    
    .dm-dynoments-grid.dm-6 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);  
    }   

/**
 *
 * Media Query for Tablet 
 *
 */

@media screen and (max-width: 1024px) {

  .dm-dynoments-grid {
    grid-column-gap:  var(--dynoments-column-gap-tablet);
    grid-row-gap: var(--dynoments-row-gap-tablet);

  }

    .dm-dynoments-grid.dm-tablet-1 {
     grid-template-columns: minmax(0,1fr);
    }  

    .dm-dynoments-grid.dm-tablet-2 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }

    .dm-dynoments-grid.dm-tablet-3 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    }    

    .dm-dynoments-grid.dm-tablet-4 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    }

    .dm-dynoments-grid.dm-tablet-5 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); 
    }   
    
    .dm-dynoments-grid.dm-tablet-6 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);  
    }       

}

/**
 *
 * Media Query for Tablet 
 *
 */

@media screen and (max-width: 767px) {
.dm-dynoments-grid {
  grid-column-gap:  var(--dynoments-column-gap-mobile);
  grid-row-gap: var(--dynoments-row-gap-mobile);

}
    .dm-dynoments-grid.dm-mobile-1 {
      grid-template-columns: minmax(0,1fr);  
    }  

    .dm-dynoments-grid.dm-mobile-2 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);  
    }

    .dm-dynoments-grid.dm-mobile-3 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);  
    }    

    .dm-dynoments-grid.dm-mobile-4 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);  
    }

    .dm-dynoments-grid.dm-mobile-5 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);  
    }   
    
    .dm-dynoments-grid.dm-mobile-6 {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);  
    }    

}