.flip-card {
  /* width: 250px; */
  height: 250px;
  perspective: 1000px; /* Enables 3D effect */
  position: relative;
  max-width: 375px;
  width: 100%;
  justify-self: center;
  min-width: 250px;
}

/* Both sides of the card */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
  border-radius: 5px; /* Optional rounded corners */
}

/* Front face styling */
.flip-card-front {
  background-color: var(--front-bg, navy);
  color: var(--front-text-color, white);
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;
  padding-top: 10px; /* Add padding at the top */
  padding-top:23px;
}

/* Front face styling */
.flip-card-front img {
	position: absolute;
	bottom: 0;
}

/* Back face styling */
.flip-card-back {
  background-color: var(--back-bg, pink);
  color: var(--back-text-color, white);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg); /* Initially hide the back */
  text-align: center;
  padding: 10px;
}

/* On hover, flip each face */
.flip-card:hover .flip-card-front {
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-back {
  transform: rotateY(0deg);
}
.flip-card-front h3,
.flip-card-front h3 a {
	font-weight: 600;
  margin: 0px 0.5em 0.5em;
  font-size: 28px;
  color: white;
}

.flip-card-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  perspective: 1000px; /* Match the flip-card perspective */
}

.flip-card-link:hover {
  text-decoration: none;
}

#block-circle360-adminloginblock,
#block-circle360-eventsloginblock,
#block-circle360-membershiploginblock,
#block-circle360-financeloginblock,
#block-circle360-mailingsloginblock,
#block-circle360-memberloginblock {
	padding: 20px;
  display: inline-block;
  vertical-align: middle;
}


/*** 3 by 3 grid style ***/
.flip-card-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1, 1fr); /* Default: 1 column */
}

@media (min-width: 576px) {
  .flip-card-grid {
    grid-template-columns: repeat(2, 1fr); /* Small screens */
  }
}

@media (min-width: 992px) {
  .flip-card-grid {
    grid-template-columns: repeat(3, 1fr); /* Large screens and up */
  }
}