/* static/css/transfem.css */

/* Page container */
.main{
  margin: 20px;
  padding: 50px;

  /* NON-FLOAT layout */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

/* Page title */
h3 {
  color: rgb(255, 255, 255);
  text-align: center;
  margin-top: 70px;
  margin-bottom: 30px;
  font-size: 28px;
}

/* Make entire tile clickable */
.gallery-link{
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* Thumbnail card */
div.gallery {
  border-radius: 15px;
  border: 2px solid rgba(240, 202, 131, 0.5);
  width: 180px;

  -webkit-mask-image: linear-gradient(
    45deg,
    #fcf7f7 25%,
    rgba(245, 243, 243, 0.2) 50%,
    #ebe3e3 75%
  );
  mask-image: linear-gradient(
    45deg,
    #f5efef 25%,
    rgba(241, 236, 236, 0.2) 50%,
    #f5efef 75%
  );

  -webkit-mask-size: 800%;
  mask-size: 800%;
  -webkit-mask-position: 0;
  mask-position: 0;
}

/* Hover effect */
div.gallery:hover {
  border: 1px solid #777;
  cursor: pointer;
  opacity: 0.9;
  transition: mask-position 2s ease, -webkit-mask-position 2s ease;
  -webkit-mask-position: 120%;
  mask-position: 120%;
}

/* Click effect */
div.gallery:active { 
  transform: scale(0.98); 
  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
}

/* Image */
div.gallery img {
  border-radius: 15px;
  width: 100%;
  height: auto;
}

/* Title under image */
div.desc {
  padding: 15px;
  color: rgb(154, 33, 190);
  font-size: 20px;
  text-align: center;
}

/* Date / meta text */
p {
  color: rgb(60, 224, 10);
  text-align: center;
}