/* Photo source : larchiveum.net */

/* Basic-start */
html { font-size: 62.5%; }
html, body { width: auto; height: auto; }
a { text-decoration: none; color: black; }

header { height: 40px; display: flex; justify-content: center; font-size: 1.5vw; }
footer { display: flex; justify-content: center; font-size: 1vw; height: 50px; align-items: center; padding-top: 50px; text-align: center;}
/* Basic-end */




.grid_wrapper {
  display: flex;
  justify-content: center;
  }

@media (max-width: 799px) {
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
	} 
.con_text, .con_img, .con_img img {
  max-width: 25vw;
  min-width: 16vw;
  aspect-ratio: 1 / 1;
}
}

@media (min-width: 800px) {
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
	} /* Responsive img group (aspect-ratio) */
.con_text, .con_img, .con_img img {
  max-width: 9vw;
  min-width: 9vw;
  aspect-ratio: 1 / 1;
}
}

.con {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.con_text {
  visibility: hidden;
  position: absolute;
  display: grid;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  width: 100%;
  }

/* font-size */
.con_text_name {
   font-family: 'Raleway', sans-serif;
   font-size: 14px;
	font-weight: 500;
   color: #FFFFFF;
   padding-bottom: 5px;
}
.con_text_sub {
  font-family: 'Raleway', sans-serif;
  font-size: 1.1vw;
  color: #ffffff;
}

/* if it is not 'flex', 'a' has some heights */
.con_img { display: flex; }

.con_img img { border: solid 1px #00000000; }



/* hover */ 
a:hover .con_text {
  vertical-align: center;
  visibility: visible;
  background-color: #00000090;
  }
a:hover .con_img img { border: solid 1px #00000070; }