img{max-height:100%;}

p{
    font-size: 1rem;
    line-height: 1.5em;
}


.grow {
 
  display: flex;
  justify-content: center;

 
}
.grid{background: white;display: grid;grid-template-columns: repeat(5, 1fr);}


.grow .card {
  flex: 1;
  transition: all 1s ease-in-out;
  position:;
  display: flex;
  flex-direction: column;
}
.grow .card .card__head {
  padding:;
  transition: all 0.5s ease-in-out;
  text-align: left;
  position: 
  relative;
  min-width: 100%;
  padding: 0em 1em 1em 1em;
  bottom: 0;
  z-index:999;
  background: white;
  left: 0;
  white-space:;
  opacity: 0;
  }
.grow .card:hover {
  flex-grow: 14;
}
.grow .card:hover img {
  filter: grayscale(0);

}
iframe{  width: 100%;
  object-fit: cover;
  height:50%;
filter: grayscale(75%);
transition: all 3s ease;}
iframe:hover{ z-index:999; z-index:999;

flex-grow: 90;}
.grow .card:hover .card__head {
  text-align: left;
  top: calc(100% - 2em);
  color: black;
  font-size: 1em;
min-width: 100%;
  z-index: 999;
  align-self: unset;
  position: inherit;

  opacity: 1;

}

.grow .card img {
  width: 100%;
object-fit:cover;
filter: grayscale(100%);
transition: all 1s ease;}
.grow .card img:hover {
 object-fit: contain;}
.card{
    transition: all 1s ease;
}
.growone{
  grid-column:4;
  z-index: 999;
}
.growone .one{
    height: 30vh;
}
.growone .one:hover{ z-index:999;
    height: 50vh;
}

.growtwo{
  grid-column: 4/5;
  grid-row:3;
}
.growtwo .two{
    height: 15vh;
    align-self: baseline;
}
.growtwo .two:hover{ z-index:999;
    height: 20vh;
}

.growthree{
  grid-column:3/4;
  grid-row:2;
  z-index: 3;
}
.growthree:hover{ z-index:999;

  z-index: 9999;
}
.growthree .three{
    height: 15vh;
}
.growthree:hover{
    grid-column:3/5;
}
.growthree .three:hover{ z-index:999;
    height: 50vh;
   
  
}
.growfour{
  grid-column:3;
  grid-row: 4;
  justify-self: initial;
  z-index: 1;
  margin: auto;
}
.growfour .four{
    height: 40vh;
    padding: 1em 1em 1em 1em;
}
.growfour .four:hover{ z-index:999;
    height: 50vh;}
    .growfour:hover{ z-index:999;
      grid-column: 2/5;}

  .growfive{FONT-WEIGHT: 200;grid-column: 2;grid-row: 1;justify-self: initial;z-index: 3;}
      .growfive .five{
  height: 41vh;
  }
      .growfive .five:hover{ z-index:999;
  height: 45vh;}
  .growsix{
    grid-column:2;
    grid-row: 1;
    justify-self: initial;
    z-index: 3;
 }
 .growsix .six{
      height: 40vh;
 }
 .growsix .six:hover{ z-index:999;
      height: 65vh;}
      .growsix:hover{ z-index:999;
        grid-column: 2/4;}
  
    


        .growseven{
grid-column:1;
grid-row: 3;
z-index: 3;
       }
       .growseven .seven{
  height: 40vh;
       }
       .growseven .seven:hover{ z-index:999;
        align-self: left;
  height: 60vh;}
 .growseven:hover{ z-index:999;
  grid-column:1/4;
 }



 .groweight{
  grid-column: 1;
  grid-row: 2;
  justify-self: inherit;
  z-index: 3;
         }
         .groweight .eight{
    height: 10vh;
         }
         .groweight .eight:hover{ z-index:999;
    height: 25vh;}
    .grownine{grid-column1;grid-row: 4;justify-self: initial;z-index: 3;width: 10vw;}
   .grownine .nine{
  height: 20vh;
  }
   .grownine .nine:hover{ z-index:999;
  height: 30vh;}
  .grownine:hover{ z-index:999;width:100%;}
  .growten{
    grid-column: 3;
    grid-row: 1;
    justify-self: initial;
    z-index: 3;
 }
 .growten .ten{
      height: 10vh;
      align-self: center;
 }
 .growten .ten:hover{ z-index:999;
      height: 65vh;}
  
  
  


      .groweleven{
        grid-column: 2;
        grid-row:3;
        z-index: 1;
        
      }
      .groweleven:hover{ z-index:999;
      
        z-index: 9999;
      }
      .groweleven .eleven{
height: 15vh;
      }
      .groweleven .eleven:hover{ z-index:999;
height: 20vh;
        
      }
      .growtwelve{   transition: all 1s ease
        grid-column:;
        grid-column: 4/5;
        grid-row: 2;
        justify-self: initial;
        z-index: 3;
        margin: 3em 0em 0em 2em;
      }
      .growtwelve .twelve{height: 20vh;}
      .growtwelve .twelve:hover{ z-index:999;
height: 50vh;}
 
.growtwelve:hover{
  z-index:999;
  grid-column:3/5;
}
  


  .growthirteen{
        grid-column: 5;
        grid-row:4;
        z-index: 1;
      }
      .growthirteen:hover{ z-index:999;
      
        z-index: 9999;
      }
      .growthirteen .thirteen{
height: 30vh;
      }
      .growthirteen .thirteen:hover{ z-index:999;
height: 48vh;
        
      }

      .growfourteen{
        grid-column: 3/5;
        grid-row: 3;
        justify-self: initial;
        z-index: 3;
        margin: 3em 0em 0em 2em;
      }
      .growfourteen .fourteen{height: 30vh;}
      .growfourteen .fourteen:hover{ z-index:999;
height: 50vh;}

.growfifteen{
  height: 20vh;
  grid-column: 5;
  grid-row: 1;
  justify-self: initial;
  z-index: 3;
  margin: 3em 0em 0em 2em;
}
.growfifteen .fifteen{
    height: 40vh;
}
.growfifteen .fifteen:hover{ z-index:999;
    height: 20vh;}

    .growsixteen{FONT-VARIANT: JIS04;height: auto;grid-column: 3/4;grid-row: 4;width: 30vw;justify-self: initial;z-index: 3;margin: 3em 0em 0em 2em;FONT-VARIANT: JIS83;}
    .growsixteen .sixteen{
        height: 30vh;
    }
    .growsixteen .sixteen:hover{ z-index:999;
        height: 60vh;}
        

    
      
      

  
  @media (max-width:599px) and (min-width:0px) {
.grid{
  display: grid;
  grid-template-columns: repeat(1,1fr);
}

.growone:hover,
.growtwo:hover,
.growthree:hover,
.growfour:hover,
.growfive:hover,
.growsix:hover,
.growseven:hover,
.groweight:hover,
.grownine:hover,
.growten:hover,
.groweleven:hover,
.growtwelve:hover,
.growthirteen:hover,
.growfourteen:hover,
.growfifteen:hover,
.growsixteen:hover
{ height: 100%;
}
.growone{
  grid-column:4;
  z-index: 999;
}
.growone .one{
    height: 30vh;
}
.growone .one:hover{ z-index:999;
    height: 50vh;
}

.growtwo{
  grid-column: 4/5;
  grid-row:3;
}
.growtwo .two{
    height: 15vh;
    align-self: baseline;
}
.growtwo .two:hover{ z-index:999;
    height: 20vh;
}

.growthree{
  grid-column:3/4;
  grid-row:2;
  z-index: 3;
}
.growthree:hover{ z-index:999;

  z-index: 9999;
}
.growthree .three{
    height: 15vh;
}
.growthree:hover{
    grid-column:3/5;
}
.growthree .three:hover{ z-index:999;
    height: 50vh;
   
  
}
.growfour{
  grid-column:3;
  grid-row: 4;
  justify-self: initial;
  z-index: 1;
  margin: auto;
}
.growfour .four{
    height: 40vh;
    padding: 1em 1em 1em 1em;
}
.growfour .four:hover{ z-index:999;
    height: 50vh;}
    .growfour:hover{ z-index:999;
      grid-column: 2/5;}

  .growfive{FONT-WEIGHT: 200;grid-column: 2;grid-row: 1;justify-self: initial;z-index: 3;}
      .growfive .five{
  height: 41vh;
  }
      .growfive .five:hover{ z-index:999;
  height: 45vh;}
  .growsix{
    grid-column:2;
    grid-row: 1;
    justify-self: initial;
    z-index: 3;
 }
 .growsix .six{
      height: 40vh;
 }
 .growsix .six:hover{ z-index:999;
      height: 65vh;}
      .growsix:hover{ z-index:999;
        grid-column: 2/4;}
  
    


        .growseven{
grid-column:1;
grid-row: 3;
z-index: 3;
       }
       .growseven .seven{
  height: 40vh;
       }
       .growseven .seven:hover{ z-index:999;
        align-self: left;
  height: 60vh;}
 .growseven:hover{ z-index:999;
  grid-column:1/4;
 }



 .groweight{
  grid-column: 1;
  grid-row: 2;
  justify-self: inherit;
  z-index: 3;
         }
         .groweight .eight{
    height: 10vh;
         }
         .groweight .eight:hover{ z-index:999;
    height: 25vh;}
    .grownine{grid-column1;grid-row: 4;justify-self: initial;z-index: 3;width: 10vw;}
   .grownine .nine{
  height: 20vh;
  }
   .grownine .nine:hover{ z-index:999;
  height: 30vh;}
  .grownine:hover{ z-index:999;width:100%;}
  .growten{
    grid-column: 3;
    grid-row: 1;
    justify-self: initial;
    z-index: 3;
 }
 .growten .ten{
      height: 10vh;
      align-self: center;
 }
 .growten .ten:hover{ z-index:999;
      height: 65vh;}
  
  
  


      .groweleven{
        grid-column: 2;
        grid-row:3;
        z-index: 1;
      }
      .groweleven:hover{ z-index:999;
      
        z-index: 9999;
      }
      .groweleven .eleven{
height: 15vh;
      }
      .groweleven .eleven:hover{ z-index:999;
height: 20vh;
        
      }
      .growtwelve{
        grid-column:;
        grid-column: 4/5;
        grid-row: 2;
        justify-self: initial;
        z-index: 3;
        margin: 3em 0em 0em 2em;
      }
      .growtwelve .twelve{height: 20vh;}
      .growtwelve .twelve:hover{ z-index:999;
height: 50vh;}
 
  


  .growthirteen{
        grid-column: 5;
        grid-row:4;
        z-index: 1;
      }
      .growthirteen:hover{ z-index:999;
      
        z-index: 9999;
      }
      .growthirteen .thirteen{
height: 30vh;
      }
      .growthirteen .thirteen:hover{ z-index:999;
height: 48vh;
        
      }
      
      .growfourteen{
        grid-column: 3/5;
        grid-row: 3;
        justify-self: initial;
        z-index: 3;
        margin: 3em 0em 0em 2em;
      }
      .growfourteen .fourteen{height: 30vh;}
      .growfourteen .fourteen:hover{ z-index:999;
height: 50vh;}

.growfifteen{
  height: 20vh;
  grid-column: 5;
  grid-row: 1;
  justify-self: initial;
  z-index: 3;
  margin: 3em 0em 0em 2em;
}
.growfifteen .fifteen{
    height: 40vh;
}
.growfifteen .fifteen:hover{ z-index:999;
    height: 20vh;}

    .growsixteen{FONT-VARIANT: JIS04;height: auto;grid-column: 3/4;grid-row: 4;width: 30v;justify-self: initial;z-index: 3;margin: 3em 0em 0em 2em;FONT-VARIANT: JIS83;}
    .growsixteen .sixteen{
        height: 30vh;
    }
    .growsixteen .sixteen:hover{ z-index:999;
        height: 20vh;}
        

    



  }