/* CSS for cards we can add this anywhere we would like to use cards */
#cards {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(200px, 400px)); */
  /* this is easier, but not as nice as using @media queries for breakpoints */
  grid-template-columns: 1fr;
  gap: 1.44rem;
  padding: 1.44rem 0.833rem; /* remember top right bottom left */
}
#cards figure{
  position: relative;
  aspect-ratio: 16/6;
}

#cards a{
  border-radius: 2rem;
  overflow:hidden;
  text-decoration: none;
  
}

#cards img {
  width: 100%;
  aspect-ratio: 16/6;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 0;
}

#cards section{
  padding: 0.833rem;
}

#cards h3 {
  font-size: clamp(0.833rem, 1.6vw + 0.579rem, 1.728rem);
  /* opacity transition*/
  opacity: 0.5;
  transition: opacity 1.5s;

}

#cards p{
  /* opacity transition*/

}

#cards .over{
  position: relative;
  /* move card down top = 1.728rem */
  transform: translateY(1.728rem);
  opacity: 0;
  transition: all 0.25s;
}

/* better to put these styles with related styles, but gathering all animation styles here to make it easier to find */

#cards a:hover {
  /* transition color */
  transition: color 1s;
}

/* hover is still on the link, 'a' but style applies to h3 & p inside link element */
#cards a:hover h3, #cards a:hover p{
  /* opacity 1*/
  opacity: 1;
}

#cards section{
  transform: translateY(3.5rem);
  transition: transform 0.25s;
}

#cards a:hover section{
  transform: translateY(0);
}

#cards a:hover .over{
  transform: translateY(0);
  opacity: 1;
}

/* responsive styles for cards*/
@media screen and (min-width:525px) {
  #cards {
    grid-template-columns: 1fr 1fr;
  }
}


@media screen and (min-width:225px) {
  #cards {
    grid-template-columns: 1fr;
  }
}

img{
  width: 100%;
} 

#cards{
  background-color: #DB83CE;
  display: grid;

  gap: 1.44rem;
} 

@media screen and (min-width: 200px){
  #cards{
      grid-template-columns: 1fr 1fr;
  } 
}