#works {
    background-color: var(--softbg);
    height: 100%;
}

#works #sectit {
    color: black;
    width: 28%;
}
.item{
    overflow: hidden;
}
.item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gridcon{
    margin: 2.5rem 0rem;
    /* border: green solid; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {  
    opacity: 0.8;
    /* border: red solid; */
    display: grid;
    width: fit-content;
    grid-template-columns: 21em 21em 21em 21em;
    grid-template-rows:12em 12em 12em 12em;
    gap: 15px 15px;
    grid-auto-flow: row;
    grid-template-areas:
      "picbt1 picbt1 picbt2 picbt3"
      "picbt1 picbt1 picbt2 picbt4"
      "picbt5 picbt7 picbt8 picbt8"
      "picbt6 picbt7 picbt8 picbt8";
  }
  
  .picbt1 { grid-area: picbt1; background-color: #740303; }
  
  .picbt2 { grid-area: picbt2; background-color: #e38686; }
  
  .picbt3 { grid-area: picbt3; background-color: #7c64e8; }
  
  .picbt4 { grid-area: picbt4; background-color: #1ed06b; }
  
  .picbt5 { grid-area: picbt5; background-color: #ebee23; }
  
  .picbt6 { grid-area: picbt6; background-color: #19a514; }
  
  .picbt7 { grid-area: picbt7; background-color: #9bc69d; }
  
  .picbt8 { grid-area: picbt8; background-color: #27acc3; }