.grild{        
        overflow: auto;
        display: grid;
        grid-gap: 2px;
        width: 100%;
        height: 100%;
        z-index: var(--z-gridingrid);
        background-color:var(--c-background);
        color: var(--c-grid-txt);
       }


/*****************/
/*  GRID BOXES  */  
/*****************/

.gridingrid {
        grid-template-columns:1fr 3fr; /*Fr is a fractional unit and 1fr is for 1 part of the available space*/
        grid-template-areas: 
            ' info   full  '
       }

    .bolx { /* algemeen voor alle gridelementen */
        box-sizing: border-box;     /* border on inside of box */
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    img.bolx{width: 100%;padding:10px;}


  /*****************/
  /*  GRID AREAS  */  
  /*****************/


    .info {
        grid-area: info;
        z-index: var(--z-info);
        border: none;  
        overflow-y:scroll;
        overflow-x:hidden;  
      
        font-weight: normal;   
        position:fixed;
        text-align: left;
    }

    .full {
        grid-area: full;
        font-size:17px;
        text-align: left;
        line-height: 25px;
        padding-left:20px;
        border-left: solid 2px var(--c-title-border);
        z-index: var(--z-full);
        font-weight: normal;
    }

    ::-webkit-scrollbar {
        width: 0.5em;
        height: 0.5em;
      }
      
    ::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,.1);
        border-radius: 3px;
      }


/*****************/
/***** PHONE ****/
/*****************/

@media only screen and (max-width: 700px) {
	
 
   
    .gridingrid {
        grid-template-columns:1fr;
        grid-template-rows:auto auto; 
        grid-template-areas: 
            ' info  '
            ' full  ';
       }


    .info { 
        position:relative;
        overflow:scroll;
    }

    .full{
        border: none;
        font-size: 13px
    }

}