/* 4 columns 300px cards */

.container4col {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 30px;  row-gap: 50px;
  justify-content: center;  /* centers the grid if it doesn't fill full width */
}

.card {
  width: 100%;  /* fills the grid column */
}

.cardImg img {
transition: .3s ease;
margin: 0 0 10px 0;
border: none;	
}

.cardImg img:hover {
box-shadow: 0 0 0 1px #000000;
transition: .3s ease;
}


/* 3 columns 100% width */

.container3col {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;  row-gap: 50px;
}

/* tablet — 2 columns */
@media (max-width: 1024px) {
  .container3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* mobile — 1 column */
@media (max-width: 768px) {
  .container3col {
    grid-template-columns: 1fr;
  }
}

.col {
  /* add styling if needed */
}


/* 2 assymetrial columns for Project Archives */

.container2col {
  width: 100%;
  display: grid;
  grid-template-columns: 300px 1fr; /* right column width 940px */
  column-gap: 50px;  row-gap: 75px;
}

/* tablet — stack columns */
@media (max-width: 1024px) {
  .container2col {
    grid-template-columns: 1fr;
  }
}

.col2Left {
  /* add styling if needed */
}

.col2Right img {
  width: 100%;         /* fills the column */
  height: auto;        /* maintains aspect ratio */
  display: block;      /* removes inline gap */
  margin: 0 auto 75px auto;  /* auto left/right centers, 75px bottom gap */
}

.col2Right img:last-child {
  margin-bottom: 0;
}

.imgSmall {
  max-width: 300px;
}

.imgMed {
  max-width: 600px;
}

.imgFull {
  max-width: 100%;
}

.imgFullBotMarg {
  max-width: 100%;
  margin-bottom: 75px;	
}