/* Start of grid area delcarations */

/* Start of universial declarations  */

.title {
  grid-area: title;
}
nav {
  grid-area: nav;
}
.footer {
  grid-area: footer;
}

/* End of universial declarations  */

/* Start of main content declarations  */

#programming {
  grid-area: mainContent;
}
#other {
  grid-area: mainContent;
}
#cv {
  grid-area: mainContent;
}
.exBlock {
  grid-area: exBlock;
}
.exList {
  grid-area: exList;
  margin-left: 5%;
}

/* End of main content declarations  */

/* Start of nested grid declarations (Programming & Other) */

.heading {
  grid-area: heading;
}
.desc {
  grid-area: desc;
}
.slideShow {
  grid-area: img;
}
.videoShowcase {
  grid-area: video;
}
.filler {
  grid-area: fill;
}

/* End of nested grid declarations (Programming & Other) */

/* End of grid area declarations */

/* Start of grid declarations */

.container {
  display: grid;
  grid-template-columns: repeat(8, auto);
  grid-template-rows: repeat(5, auto);
  width: 100%;
  margin: 0;
  grid-template-areas:
    "title title title title title title title title"
    "nav nav nav nav nav nav nav nav"
    "mainContent mainContent mainContent mainContent mainContent mainContent mainContent mainContent"
    "footer footer footer footer footer footer footer footer"
}
#programming {
  grid-template-rows: repeat(8, auto);
  width: 95%;
  margin: auto;
  grid-template-areas:
    "exBlock"
    "exBlock"
    "exBlock"
    "exBlock"
    "exBlock"
    "exBlock"
    "exBlock"
    "exList"
}
#other {
  grid-template-rows: repeat(3, auto);
  width: 95%;
  margin: auto;
  grid-template-areas:
    "exBlock"
    "exBlock"
    "exBlock"
}
.exBlock {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(4, auto);
  width: 100%;
  margin: auto;
  margin-left: 5%;
  grid-template-areas:
    "heading heading heading heading"
    "desc img img img"
    "desc img img img"
    "desc img img img"
}
.exBlockNoImg {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(4, auto);
  width: 100%;
  margin: auto;
  grid-template-areas:
    "heading heading heading heading"
    "desc desc desc desc"
    "desc desc desc desc"
    "desc desc desc desc"
}
.exBlockWithVideo {
  display: grid;
  grid-template-columns: repeat(5, 25%);
  grid-template-rows: repeat(5, auto);
  width: 100%;
  margin: auto;
  margin-left: 5%;
  grid-template-areas:
    "heading heading heading heading"
    "desc video video video"
    "desc video video video"
    "desc video video video"
}

/* Start of mobile grid declarations */

@media (max-width: 640px) {
  .container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "title title title title"
      "nav nav nav nav"
      "mainContent mainContent mainContent mainContent"
      "footer footer footer footer"
  }
  #programming {
    grid-template-rows: repeat(8, auto);
    width: 99%;
    margin: auto;
    grid-template-areas:
      "exBlock"
      "exBlock"
      "exBlock"
      "exBlock"
      "exBlock"
      "exBlock"
      "exBlock"
      "exList"
  }
  #other {
    grid-template-rows: repeat(3, auto);
    width: 99%;
    margin: auto;
    grid-template-areas:
      "exBlock"
      "exBlock"
      "exBlock"
  }

  .exBlock {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(4, auto);
  width: 100%;
  margin: auto;
  grid-template-areas:
    "heading heading"
    "desc img"
    "desc img"
    "desc img"
  }
  .exBlockWithVideo {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(5, auto);
    width: 100%;
    margin: auto;
    grid-template-areas:
      "heading heading"
      "desc img"
      "desc img"
      "desc img"
      "fill video"
  }
}