@charset "utf-8"; 
/* CSS Document */
 

 
 .div1 { 
     background-color:red;
     font-size:34px;
     text-align:center;
      
  }
  .div2 { 
      background-color:blue;
      font-size:34px;
   text-align: center;}
   
   .div3 { 
       background-color:pink;
      font-size:34px;
   text-align: center;}
   
   .div4{
       background-color:#DC8F19;
       text-align:center;
       display: block; margin-left:auto; margin-right:auto;
   }
   
   .div5 {
       background-color:#FFFFCE;
     font-size:34px;
     text-align:center;
   } 
   
   .column-layout {
       max-width:1300px;
       background-color:#D9B79D;
       margin:40px auto 0 auto;
       line-height:2;
       padding: 20px 50px;
       display:flex;
       
       
   }
   
   .main-column { flex:2 ;
   order:2;} 
   
   .sidebar-one  { flex:1;order:1;}
   
   .sidebar-two  {flex:1;order:3;}
   
   .call-outs-container {
       max-width:1400px;
       margin:40px auto 0 auto;
       box-sizing:border-box;

       
   } 
   
   .call-out {
       flex-basis:30%;
       padding:20px;
       margin-bottom:20px;
       margin-right:40px;   
       
   }
   
   @media (min-width:900px)
{.call-outs-container{
    display:flex;
    justify-content:space-between;
    
}
    
}   
   .call-out:nth-child(1) {background-color: #FFA764;}
   .call-out:nth-child(2) {background-color: #FF7207;}
   .call-out:nth-child(3) {background-color: #FABA04;margin-right:0px;}
   
   
   .equal-height-container{
       max-width:900px;
       margin: 0 auto;
       display:flex;
       
   }
   .first {
       background-color:#DA9A06;
       padding:20px;
       flex:1;
       background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjuQ002mGzljuKUaymktv-NolZwSvRj_mdnw&s");
       min-height:550px;
       background-repeat:no-repeat;
       background-size:cover;
       
   }
   .chicken { 
       background-color:#DA9A06;
       padding:20px;
       flex:1;
       background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSsO_a01_6_vPKpVZre3TQZhduP_D93KeAgg&s");
       min-height:500px;
       background-repeat:no-repeat;
       background-size:cover;
   }
   .second {
       background-color:#FCBE2E;
       flex:1;
       display:flex;
       flex-direction:column;
       
   }
   .second-a{
       background-color:#FEC43D;
       flex:1;
       
   }
   .second-b{
       background-color:#FACA59;
       flex:1;
       
   }
   
   
   
  .basic-grid {
      display:grid;
      gap: 1rem;
      
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
      
      grid-template-columns: repeat(12, 1fr);
      
      grid-template-columns: repeat(12, minmax(240px) );
      
      grid-template-columns: repeat(auto-fit, minmax(240px,1fr));}
      
      


  
  .card {
      display: flex;
      flex-direction:row;
      justify-content:center;
      align-items:center;
      background-color:#FFC433;
      font-size:2rem;
      height:100%;
      width:100%;
     
      border-radius:20px;
      transition:all 500ms;
      overflow:hidden;
      
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
  }
  .card:nth-child(1){    
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxxKQW1c0cblbhAmZoQFNqFQE09d3a8BR6WA&s");
      margin-left:auto; margin-right:-10px;
		            border-radius:20px; 
      width:150px ;
      height:150px;
  }
  .card:nth-child(12){    
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxxKQW1c0cblbhAmZoQFNqFQE09d3a8BR6WA&s");
      margin-left:auto; margin-right:-10px;
		            border-radius:20px; 
      width:150px ;
      height:150px;
  }
  
  
  .card:hover {
      box-shadow:yellow;
      transform: translateY(-3px) scale(1.1);
  }
   
   .drac {
      display: flex;
      flex-direction:row;
      justify-content:center;
      align-items:center;
      background-color:#FFC433;
      font-size:2rem;
      height:100%;
      width:100%;
     
      border-radius:20px;
      transition:all 500ms;
      overflow:hidden;
      
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat; } 
      
      .drac:nth-child(1){    
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsiAk_qyaSbbLFvw1Afy01_yY-STCJ6WsHmw&s");
      margin-left:auto; 
		            border-radius:20px; 
      width:150px ;
      height:150px;
  }
  .drac:nth-child(12){    
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsiAk_qyaSbbLFvw1Afy01_yY-STCJ6WsHmw&s");
      margin-left:auto;
		            border-radius:20px; 
      width:150px ;
      height:150px;
  }
  
   .drac:hover {
      box-shadow:yellow;
      transform: translateY(-3px) scale(1.1);}