.section {height:100%; width:100%;}
.blue {background: #889cd1;}
.colar { background: coral;}
.info {background: #b6ebb6;}
.yellow {background: #fcc25a;}
.purple {background: #d0b2e6;}
.red {background: #ffe2d2;}
.dark-light {background: #646f67;}
.pink {background: #e5cfe5;}
.parent{min-height: 300px; margin-bottom: 65px;}
.box { width: 300px; height: 300px;} 
.bg-height { height: 400px;}
.f-h { height: 100%;}
.f-w{ width: 100%;}
 .ex1 .parent{
    display:grid;
    place-items: center;    
}
/* 02. */
.ex2 { box-shadow: 0 2px 2px 2px; }
.ex2 .parent{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
 .box {
     /* flex:1 1 250px;  /*  stretching N.B these streches affect height and width */
    flex:0 1 400px;  /* no strech*/
    margin:5px;
   
}

/* 03.sidebar */
.ex3 .parent {
    display: grid;
    grid-template-columns:minmax(150px, 25%) 1fr;
}
/* 04. Pancake Stack */
.ex4 .parent {
    display:grid;
    grid-template-rows: auto 1fr auto;   
}
/* 05. holygrail layout */
.ex5 .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto; /*  rows/ columns  */
    
    
}
.ex5 .header, .ex5 .footer {
    padding: 2rem;
    grid-column: 1/4;
}
.ex5 .left-side {
    grid-column: 1/2;
}
.ex5 .main {
    grid-column: 2/3;
}
.ex5 .right-side {
    grid-column: 3/4;
}
/* 6 is repeat */
/* 7. RAM (Repeat Auto MinMax) */
.ex7 .parent {
    display: grid;
    gap:1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Line up */
.ex8 .parent {
    display:grid;
    gap:32px;
    height:auto;
    grid-template-columns:repeat(3, 1fr);
}
.ex8 .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-between;
}
.ex8 .visual {
    height: 100px;
    width: 100%;
}
.ex8 h3 {
    margin:0;
}
/* clamping my style */
.ex9 .parent {
    display: grid;
    place-items:center;
}
.ex9 .card {
    width: clamp(23ch, 50%, 46ch);
    display:flex;
    flex-direction: column;
    padding: 1rem;
}
/* Respect for aspect */
.ex10 .parent {
display: grid;
place-items: center;
}
.ex10 .visual {
    aspect-ratio: 16/9; /* width/ height */
}
.ex10 .card {
    width: 50%;
    display:flex;
    flex-direction: column; 
}