/* https://codewithbishal.com/example/how-to-create-responsive-column-cards# */

/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); */
@import url('./fonts/font-poppins.css');


*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body{
display: flex;
justify-content: center;
align-items: center;
background:#e0e0e09d;
min-height: 100vh;
}

.container{
width: 1000vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.container .cwb-cards{
position: relative;
width: 290px;
height: 440px;
background: #B51636;
display: flex;
justify-content: center;
align-items: center;
margin: 25px;
box-shadow: 0 15px 45px black;
}

.container .cwb-cards .cwb-content{
padding: 40px;
align-items: center;
justify-content: center;
}

.container .cwb-cards .cwb-content h2{
position: absolute;
right: 30px;
font-size: 4em;
font-weight: 700;
color: #5A0B1B;
z-index: 1;
/*opacity: 0.1;*/
opacity: 1;
transition: 500ms;
transform: translateY(-70px);
}

.container .cwb-cards:hover .cwb-content h2{
opacity: 1;
/*transform: translateY(-70px);*/
}

.container .cwb-cards .cwb-content h3{
position: relative;
font-size: 1.5em;
color: white;
z-index: 2;
opacity: 0.4;
letter-spacing: 1px;
transition: 500ms;
}

.container .cwb-cards .cwb-content p{
position: relative;
justify-content: center;
align-self: center;
font-size: 1.5em;
color: white;
z-index: 2;
font-weight: 200;
/*opacity: 0.4;*/
opacity: 1;
transition: 500ms;
}

.container .cwb-cards:hover .cwb-content h3, 
.container .cwb-cards:hover .cwb-content p{
opacity: 1;
}

.container .cwb-cards a{
display: inline-block;
margin-top: 20px;
padding: 10px 15px;
color: black;
opacity: 0.8;
background: white;
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
}

.container .cwb-cards:hover a{
opacity: 1;
letter-spacing: 2px;
transition: 1000ms;
background: #F9D1D9;
}