.container {
padding:0;
display:flex;
justify-content:center;
flex-wrap:wrap;
margin: 20px auto 0 auto;
max-width: 1360px;
}
.card {
margin:30px;
position:relative;
min-width: 400px;
height:500px;
box-shadow:10px 10px 20px rgba(0,0,0,0.2);
padding-bottom:80px;
transition:.3s;
border-bottom: 7px solid #006e82; 
}
.containerwhite .card {
border-bottom: none; 
}
@media only screen and (min-width : 995px) {
.card:first-child { margin-left: 0; }
.card:last-child{ margin-right: 0; }
}

@media only screen and (max-width : 1370px) {
.card {
margin:20px;
position:relative;
min-width:350px;
}
}
@media only screen and (max-width : 800px) {
.card {
margin:20px;
position:relative;
min-width:300px;
}
}
@media only screen and (max-width : 720px) {
.card {
margin:20px;
position:relative;
min-width: 430px;
}
}
@media only screen and (max-width : 600px) {
.card {
margin:20px;
position:relative;
min-width: 390px;
}
}
@media only screen and (max-width : 414px) {
.card {
margin: 20px;
position:relative;
min-width: 290px;
}
}
.card .imgbox, .card .imgboxref {
position:relative;
top:0;
left:0;
width:100%;
height:100%;
transition:.3s;
}
.card .imgbox img, .card .imgboxref img {
position:absolute;
top:0;
left:0;
width:100%;
height:70%;
display:block;
object-fit:cover;
}

.card .content {
position:absolute;
left:0;
bottom:0;
height:200px;
width: 100%;
padding:30px;
transition: all .6s cubic-bezier(.48,-0.28,0.41,1.4);
box-sizing:border-box;
overflow:hidden;
background:white;
}
.card:hover {
box-shadow:12px 12px 30px rgba(0,0,0,0.3);
cursor:pointer;
}
.card:hover .content {
height:75%;
}
.card p {
transform:translateY(1em);
line-height:1.4em;
margin-bottom: 40px;
opacity:0;
transition: all .7s cubic-bezier(.48,-0.28,0.41,1.4);
}
@media only screen and (max-width: 1024px) and (min-width: 620px) {
.card p {
line-height:1.2em;
font-size:80%;
}
}
@media only screen and (max-width : 412px) {
.card p {
line-height:1.2em;
font-size: 80%;
}
}
.card:hover p  {
transform:translateY(0);
opacity:1;
}
.card a {
padding:15px 40px;
border:none;
background:#006e82;
color:white;
font-size:18px;
font-weight: 400;
letter-spacing:1px;
transition:.3s;
}
.card a:hover {
background: #ee7567;
cursor:pointer;
box-shadow:10px 10px 30px rgba(0,0,0,0.1);
padding:15px 50px;
}
@media only screen and (max-width : 412px) {
.card a {
display: block;
text-align: center;
}
}