/************************************/
/**********GRID CLIENTS**************/
/************************************/

.grid-companies{
    display: grid;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
          grid-template-areas:
          "job01"
          "job02"
          "job03"
          "job04"
          "job08"
          "job05"
          "job06"
          "job07"
          "job09";
          ;
  }
  
  .item-companies{
    display: flex;
    flex-direction: row;
  
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.4px);
  -webkit-backdrop-filter: blur(5.4px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  
    overflow: hidden;
  }
  section .item-companies h1{
    font-size: 1.33rem;
    color:var(--clr-dark);
    font-weight: bold;
    line-height: 1.44rem;
    text-shadow: none;
  }
  
  
  .img-c{min-width: 50%;padding:1rem;display: flex; align-items: center;  justify-content: center;}
  .img-c img{margin-left: auto;margin-right: auto; }
  
  
  .content-c{
    padding: 1.22rem;
  }
  
  
  .grid-companies .btn-primary{
    font-size: 0.8rem;
  }
  
  
  
  #job01{grid-area:job01;}
  #job02{grid-area:job02;}
  #job03{grid-area:job03;}
  #job04{grid-area:job04;}
  #job05{grid-area:job05;}
  #job06{grid-area:job06;}
  #job07{grid-area:job07;}
  #job08{grid-area:job08;}
  #job09{grid-area:job09;}
  
  
  #job01 .img-c{background-color:#97ccec;}
  #job02 .img-c{background-color:#542261;}
  #job03 .img-c{background-color:#02476d;}
  #job04 .img-c{background-color:#015092;}
  #job05 .img-c{background-color:#d77c1e;}
  #job06 .img-c{background-color:#045a84;}
  #job07 .img-c{background-color:#D21A1A;}
  #job08 .img-c{background-color:#29292d;}
  #job09 .img-c{background-color:#77ae1c;}
  
  #job01 img,#job02 img,#job03 img,#job04 img,#job05 img,#job06 img,#job07 img,#job08 img,#job09 img{
    max-height: 200px;
  }
  
  @media (min-width: 480px){
     
    .grid-companies {
  
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "job01 job02"
        "job03 job04"
        "job08 job08"
        "job05 job06"
        "job07 job09";
    }
    #job01 img,#job02 img,#job03 img,#job04 img,#job05 img,#job06 img,#job07 img,#job08 img,#job09 img{
      max-height: 120px;
    }
  
    .item-companies{
      flex-direction: column;
    }
  
    section .item-companies h1{
      color:var(--clr-dark);
      margin-bottom: 0.8rem;
    }
  }
  /*exception only mobile*/
  @media (max-width: 480px){
    .img-c, .content-c{min-width:initial;max-width: initial;width: 50%;}
    .grid-companies .content-c p{
      display: none;
    }
  }
  
  
  @media (min-width:1024px){
      
    .grid-companies {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
        "job01 job02 job02"
        "job03 job08 job05"
        "job03 job07 job04"
        "job09 job06 job04";
    }
  
  
  
    .item-companies{
      flex-direction: row;
    }
    #job01{grid-area:job01;}
    #job02{grid-area:job02;}
    #job03{grid-area:job03;    display: block;}
    #job04{grid-area:job04;    display: block;}
    #job05{grid-area:job05;}
    #job06{grid-area:job06;}
    #job07{grid-area:job07;}
    #job08{grid-area:job08;background-color:var(--clr-secondary);}
    #job09{grid-area:job09;}
  
    #job02, #job03, #job04{
      background: rgba(46, 173, 168, 0.53);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5.4px);
      -webkit-backdrop-filter: blur(5.4px);
      border: 1px solid rgba(46, 173, 168, 1);
      color:#ffffff;
    }
  
    #job01 .img-c{background-color:var(--dark-green);}#job02 .img-c{background-color:var(--clr-primary);}
    #job03 .img-c{background-color:var(--clr-primary);}
    #job04 .img-c{background-color:var(--clr-primary);}
    #job05 .img-c{background-color:var(--dark-green);}
    #job06 .img-c{background-color:var(--dark-green);}
    #job07 .img-c{background-color:var(--dark-green);}
    #job08 .img-c{background-color:transparent;}
    #job09 .img-c{background-color:var(--dark-green);}
  
    #job02 .btn-primary{background-color:var(--clr-secondary);}
    #job03 .btn-primary{background-color:var(--clr-secondary);}
    #job04 .btn-primary{background-color:var(--clr-secondary);}
  
    #job02 .img-c{min-width:25%;max-height: initial;}
  
  
  
  
  }