@font-face {
  font-family: spartan;
  src: url(LeagueSpartan-Bold.ttf);
}

body {
  background-color: rgb(250, 250, 250);
  box-sizing: border-box;
}
.main {
  display: flex;
  justify-content: center;
  margin-bottom: 2em;
  height: auto;
}
.text-container {
  width: 85%;
  height: 100%;
  max-width: 900px;
  text-align: justify;
  line-height: 1.5em;
  font-size: 1.08em;
}
.text-container h1 {
  font-family: spartan;
  font-size: 4em;
  color: #333;
  margin: 0.5em;
  margin-top: 0.7em;
  text-align: center;
  letter-spacing: -1px;
  line-height: 1em;
}
.text-container span {
  font-weight: bolder;
}
.img-gallery {
  width: 100%;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2em;
  /* background-color: #333; */
}

.container {
  max-width: 900px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 15px 15px;
  grid-auto-flow: row;
  grid-template-areas:
    "gal1 gal1 gal1 gal1 gal1 gal1 gal2 gal2 gal2 gal3 gal3 gal3"
    "gal1 gal1 gal1 gal1 gal1 gal1 gal2 gal2 gal2 gal3 gal3 gal3"
    "gal1 gal1 gal1 gal1 gal1 gal1 gal2 gal2 gal2 gal3 gal3 gal3"
    "gal1 gal1 gal1 gal1 gal1 gal1 gal2 gal2 gal2 gal3 gal3 gal3"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal3 gal3 gal3"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal3 gal3 gal3"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal3 gal3 gal3"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal5 gal5 gal5"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal5 gal5 gal5"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal5 gal5 gal5"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal5 gal5 gal5"
    "gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal4 gal5 gal5 gal5";
}

.gal1 {
  grid-area: gal1;
}

.gal2 {
  grid-area: gal2;
}

.gal3 {
  grid-area: gal3;
}

.gal4 {
  grid-area: gal4;
}

.gal5 {
  grid-area: gal5;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1000px) {
  .text-container {
    text-align: left;
  }
}
@media screen and (max-width: 768px) { 
  .img-gallery {
    display: none;
  }
}