h1 {
  float:left;
	font-size:4em;
	font-weight:300;
  width:100%;
}

.class h1 {
  text-align: left;
}

main {
  float:left;
  width:100%;
  padding:10% 5%;
}

  main  .bg {
    position:fixed;
  }

.backto {
  float:left;
  font-size:1.2em;
  margin-bottom:2em;
}

    .class {
        display:grid;
        grid-template-columns: 1fr 2fr;
        grid-gap:5em;
    }

    .class-img {
        padding:5%;
    }

    .class h2,
    .class h3,
    .class h4,
    .class h5 {
        color:#fff;
        font-size:3em;
    }

.popular,
.two-col {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:10em;
}

.class-list {
    margin-bottom: 5%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:3em;
}

    .class-list a {
        background-color:#fff;
        padding:3em;
        text-decoration: none;
        display:grid;
        grid-template-columns: 10em 1fr;
        grid-gap:2em;
        transition: transform 0.5s ease, box-shadow 0.5s ease;
        box-shadow:0 0 0 var(--dblue-faded);
    }

        .class-list-img {
            max-height:12em;
            margin:0 auto;
            display:block;
        }
    
          .class-list a h2 {
            font-size:2.8em;
            color:var(--dblue);
            margin-bottom:0.5em;
          }

          .class-list a p {
            font-size:1.6em;
            margin:0;
          }
    
          .class-list a p.explore {
            display:inline-block;
            background-color:var(--black);
            padding:0.5em 1.75em;
            border-radius:100em;
            color:#fff;
            font-size:1.2em;
            margin-top:1em;
          }
    
            .class-list a:hover p.explore {
              background-color:var(--dblue);
            }

            .class-list a:hover {
              transform:translateY(-1em);
              box-shadow:0 1em 2em var(--dblue-faded);
            }

          .class-list a p.date {
            color:var(--dblue);
            margin-bottom:0.5em;
          }
          .class-list a p.location {
            color:var(--dblue);
            margin-bottom:0;
            line-height:1;
          }

.ind-class {
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-gap:5vw;
}

  .ind-class h2 {
    font-size:2.5em;
    color:#fff;
  }

  .ind-class .class-img {
    padding:0;
  }

@media (width < 1200px){
  .class-list{
    grid-gap:1em;
  }

    .class-list a {
      grid-template-columns: 1fr;
      text-align: center;
    }
}

@media (width < 1000px){
  main {
    padding-top:90px;
  }

  .class-list{
    grid-template-columns: 1fr 1fr;
  }
}

@media (width < 700px){
  .class-list{
    grid-template-columns: 1fr;
  }
}

@media (width < 600px){
  .ind-class{
    grid-template-columns: 1fr;
  }
}