/* ----- MAIN CONTENT GRID ----- */
.con{
  display: grid;
  grid-template-areas:
    "tBefHi"
    "BefHi"
    "tHi"
    "Hi"
    "tColl"
    "Coll";
    grid-template-rows: repeat(6, auto);
    grid-gap: .5vw .5vw;
}

.tBefHi {
  background-color: #bbaaee;
}

.BefHi{
  display: grid;
  grid-gap: .5vw;
  grid-template-columns: repeat(4, 16.5vw);
  grid-auto-rows: 10vw;
  background-color: #bbaaee;
}

.tHi {
  background-color: #ccaaff;
}

.Hi{
  display: grid;
  grid-gap: .5vw;
  grid-template-columns: repeat(4, 16.5vw);
  grid-auto-rows: 10vw;
  background-color: #ccaaff;
}

.tColl {
  background-color: #bbaaee;
}

.Coll{
  display: grid;
  grid-gap: .5vw;
  grid-template-columns: repeat(4, 16.5vw);
  grid-auto-rows: 10vw;
  background-color: #bbaaee;
}

/* ----- IMAGE CARD ----- */
.ArtCard{
  display: grid;
  grid-template-areas:
        "image ImgTit"
        "image ides"
        "image ilink";
  background-color: lavender;
}

.image{
  grid-area: image;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 1fr;
  border: .1vw solid #ddd;
  padding: .25vw;
  max-width: 9vw;
  max-height: 8vw;
}

.ImgTit {
  grid-area: ImgTit;
  height: 1fr;
  width: 2fr;
}

.ides {
  grid-area: ides;
  height: 2fr;
  width: 2fr;
}

.ilink {
  grid-area: ilink;
  height: 1fr;
  width: 2fr;
}



a {
  color: #000;
  font-size: 1vw;
}
p {
  font-size: 1vw;
}

h2 {
  font-size: 3vw;
}

h3 {
  font-size: 1.5vw;
}


/*---------------------------
CSS Grid
---------------------------*/

@supports (grid-area: auto) {

  @media screen and (max-width: 35em){
    .BefHi {
      grid-template-columns: repeat(3, 30vw);
      grid-auto-rows: 13vw;
    }

    .Hi {
      grid-template-columns: repeat(3, 30vw);
      grid-auto-rows: 13vw;
    }

    .Coll {
      grid-template-columns: repeat(3, 30vw);
      grid-auto-rows: 13vw;

    }

    .image {
      max-width: 13vw;
      max-height: 11vw;
    }

  }

  @media screen and (max-width: 20em) {

    .BefHi {
      grid-template-columns: repeat(2, 45vw);
      grid-auto-rows: 15vw
    }

    .Hi {
      grid-template-columns: repeat(2, 45vw);
      grid-auto-rows: 15vw
    }

    .Coll {
      grid-template-columns: repeat(2, 45vw);
      grid-auto-rows: 15vw
    }

    .image {
      max-width: 15vw;
      max-height: 13vw;
    }

  }

}