.flip-card {
  background-color: transparent;
  width: 270px;
  height: 270px;
  perspective: 1000px;
  Display:inline-block;
  border-radius: 20px;
  
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
border-radius: 20px;  
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) ;
  
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 20px;
  box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, .2));
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
   transform-style: preserve-3d;
  
   
}




.bottomContainer {
  padding: 2px 16px;
}

.section .flip__item {
    display: inline-block;
    text-align: center;
    height: 270px;
    width: 270px;
    margin: 1rem;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
}	


.flip-card-back p {
	font-size:1rem;
	    text-align: center;
		word-break: keep-all;

}

.flip-card-back h1 {
	font-size:1.7rem;
}

.section .flip-card-back .btn {
    width: 100%;
    display: inline-block;
    
}