* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}
mst-7 {font-weight: bold; font-size: calc(15px + 0.5vw); font-family:Arial, Helvetica, sans-serif; }
a.mst-7:link {text-decoration:none; color:PowderBlue; font-size: calc(15px + 0.5vw); }
a.mst-7:hover {text-decoration:none; color:#DAA520; font-size: calc(15px + 0.5vw); }
#main  {leftmargin: 0; topmargin: 0; marginwidth: 0; marginheight: 0; font-size: 0; height: 100vh; }
/* ============================================== END ==================================== */
.container {
    display: grid;
	grid-template-columns: 1fr 6fr 1fr 1fr 6fr 1fr 1fr 6fr 1fr 1fr 6fr 1fr;
	grid-template-rows: 3% auto auto auto 1%;
	gap: 0px 0px;
    grid-template-areas: 
". . . . . . . . . . . . "
"a a a a a a . d . . e . "
"a a a a a a . . . . . . "
"b b b b c . . f . . g . "
". . . . . . . . . . . . ";
}

.pic1 { grid-area: a; }
.pic2 { grid-area: b; }
.pic3 { grid-area: c; }
.pic4 { grid-area: d; }
.pic5 { grid-area: e; }
.pic6 { grid-area: f; }
.pic7 { grid-area: g; }

.tabPhot00{width: 100%; display: block; }
.grayscales {filter: grayscale(100%); transition: 1s; width: 100%; }
.grayscales:hover { filter: grayscale(0); }

@media (max-width: 768px) {
.container {
    display: grid;
	grid-template-columns: 1fr 6fr 1fr 1fr 6fr 1fr;
	grid-template-rows: 2% auto auto 5% auto 5% auto 1%;
	gap: 0px 0px;
    grid-template-areas: 
". . . . . . "
"a a a a a a "
"b b b b c . "
". . . . . . "
". d . . e . "
". . . . . . "
". f . . g . "
". . . . . . ";
}
}
/* ============================================== END ==================================== */