@charset "UTF-8";
/* CSS Document */

.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
	background: #e4e4e4 url(//www.canton.edu/media/wwwcantonedu/images/bg15.jpg) repeat-x 0 -7px;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}
.hero {
  width:100%;
  float: left;
  text-align:center;
}
#textblock{
  background: #686868  url(//www.canton.edu/media/wwwcantonedu/images/bg15-gray.jpg) repeat-x 0 -7px;
}
h1{
  font-size: 5em;
}
  
h2{
  font-size: 2em;
}
.wrapper {
  margin: 0 auto;
  overflow:hidden;
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
.wrapper > * {
  grid-column: col-start / span 12;
}

.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4 ;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}
.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  gap: 20px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}

.listing li {
  border: 2px solid #ceb077;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background: #004b8d;


}
.listing .cta {
  margin-top: auto;
  border: 1px solid #ceb077;
  padding: 10px;
  font-weight: 600;
  font-size: 1.1em;
  text-align: center;
  border-radius: 6px;
}
.listing .body {
  padding: 0 20px;

}

.nav-collapse li {
  border-bottom:none;
}

@media (min-width: 700px) {
  .main-nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .side {
    grid-column: col-start 11 / span 2;
    grid-row: 2;
  }
  .ad {
    grid-column: col-start 11 / span 2;
    grid-row: 3;
  }
  .main-footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
}

@media (min-width: 500px) {
  .side {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .ad {
    grid-column: col-start / span 3;
    grid-row: 4;
  }
  .content, .main-footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

@media (max-width: 450px) {
  .listing {
    margin: 0;
    padding-inline-start: 0;
  }
  
  h1 {
	font-size: 3em;
  }

}