.workH{
  height:100dvh;
  position: relative;
  width:100vw;
  overflow:clip;
}
.workTopImg{
  background:url(img/shirt.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position: absolute;
  height:100%;
  width:100%;
  object-fit: cover;
}
.workH h1{
  font-size:var(--h1-text);
  font-family:j2;
  position: absolute;
  bottom:0;
  right:1rem;
  line-height:1.25;
  text-transform:uppercase;
}


.work{
  display:grid;
  padding-block:10vh;
  gap:2rem;
  padding-inline:2rem;
  min-height:100%;
  grid-template-areas:
    ". . a a a a"
    ". . a a a a"
    ". . b b d d"
    ". c c c d d"
    ". c c c d d"
    "f f e e e e"
    "f f e e e e"
    ". . g g g g"
    ". . g g g g"
    ". . h h h h"
    "j j i i i i"
    "j j i i i i"
    ". . k k k k"
    ". . k k k k"
    ". . l l . ."
  ;
  overflow:clip;
  background:var(--bg-1);
}
.workDiv{
  border-radius:1.5rem;
  position:relative;
  overflow:clip;
}

.workDiv:nth-child(odd){
  height:75vh;
}
.workDiv:nth-child(1){
  height:85vh;
}
.workDiv:nth-child(3){
  height:60vh;
}

.workDiv:nth-child(even){
  background:  #e9efec;
  display:flex;
  flex-direction:column;
  justify-content:end;
  gap:.75rem;
  padding-inline:2rem;
  padding-bottom:1.5rem;
  font-weight:bold;
  min-height:25vh;
  color:black;
}
.workDiv p{
  font-size:var(--l-text);
}
.workDiv a{
  color:black;
}
.workDiv img{
  position: absolute;
  height:150%;
  width:100%;
  object-fit:cover;
}

.grid1{
  grid-area:a;
}
.grid2{
  grid-area:b;
}
.grid3{
  grid-area:c;
}
.grid4{
  grid-area:d;
}
.grid5{
  grid-area:e;
}
.grid6{
  grid-area:f;
}

.grid7{
  grid-area:g;
}
.grid8{
  grid-area:h;
}
.grid9{
  grid-area:i;
}
.grid10{
  grid-area:j;
}
.grid11{
  grid-area:k;
}
.grid12{
  grid-area:l;
}

@media (max-width:1050px) {
 .work{
   grid-template-areas:
    "a a a a"
    "b b . ."
    ". . d d"
    "c c c c"
    "f e e e"
    "g g g h"
    ". . j j"
    "i i i . "
    ". k k k"
    "l l . .";
   min-height:100%;
}
  .workDiv:nth-child(odd){
    height:60vh;
  }
  .workDiv:nth-child(even){
    height:30vh;
  }
}

@media (max-width:800px){

  .workH h1{
    font-size:var(--l-text);
  }
  
  .work{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding-inline:1.5rem;
    min-height:100%;
  }
.workDiv{
  border-radius:0;
}
  .workDiv:nth-child(even){
    background:none;
    margin-bottom:3.25rem;
    font-weight:300;
    padding-inline:0;
    gap:.5rem;
    justify-content:start;
    color:black;
  }
  .workDiv a{
  color:black;
  }
  .workDiv:nth-child(even) p{
    border-bottom:1px solid black;
    padding-block:1rem;
  }
  .workDiv:nth-child(odd){
    height:50vh;
  }
  
}