body{
  background-color: black;
}
h1,h2, h3, h4,p{
  color: white;
}
section{
  margin: 0 auto;
  max-width: 1370px;
}
section.tile ul{
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0;
  gap: 16px;
  list-style: none;
  padding: 0 !important;
}

section.tile ul li {
  height: 26vw;
  flex-grow: 1;
}

section.tile img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/****************************** BANNER */
ul.banner-photo li{
  height: 100vh;
}
/****************************** Title*/
.header-tile{
  text-align: center;
}
.tile h2{
  padding: 8vh 0 0 0;
  text-align: center;
}
.tile p{
  max-width: 60vw;
  text-align: center;
  margin: 0 auto;
  padding: 1em 0;
}
/****************************** SQUARE */
.square li{
  width: 70vh;
  height: 70vh;
}

/****************************** Column */
.column{
  flex-direction: column;
}
.column:nth-child(3){
  flex-direction: row;
}
ul ul:nth-child(2) li{
  height: 685px;
  width: 1020px;
}
ul.column.square li{
  width: 334px;
  height: 334px;
  flex-grow: 0;
}

/****************************** XCOL*/
ul.threecol li{
  height: 66vh;
}
ul.fourcol li{
  height: 50vh;
}
section:nth-last-of-type(1){
  padding-bottom: 5em;
}
@media screen and (max-width: 900px){
  section:nth-last-of-type(1){
  padding-bottom: 2em;
}
.tile p {
  max-width: 90vw;
}
li, ul.banner-photo li {
  height: auto;
}
ul ul:nth-child(2) li {
  width: 334px;
  height: 455px;
}
ul.fourcol li {
  height: 72vh;
}
ul.fourcol li {
  height: 66vh;
}


}