/*
 * Copyright (c) 2025 by Johan (https://codepen.io/JohanStam/pen/KKNaqOj)
 */
div.container_news {
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin: 0 auto 0 auto;
  max-width: 1360px;
}
.card {
  margin:20px;
  position:relative;
  min-width:400px;
  height:500px;
  box-shadow:5px 5px 15px rgba(0,0,0,0.1);
  padding-bottom:80px;
  transition:.3s;
  border-bottom: 5px solid #63b8d6; 
}
@media (max-width:1370px){
.card {
  min-width:350px;
}
}
@media (max-width:1025px){
.card {
  min-width:290px;
  margin:12px;
}
}
@media (max-width:805px){
.card {
  min-width: 330px;
}
}
@media (max-width:615px){
.card {
  min-width: 400px;
}
}
@media (max-width:415px){
.card {
  min-width: 330px;
}
}
@media (max-width:365px){
.card {
  min-width: 260px;
}
}
.card .imgbox {
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transition:.3s;
}
.card .imgbox 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:240px;
  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:77%;
}
.card__heading {
display: block;
line-height: 1.5em;
/* font-size: clamp(14.4px, calc(14.4px + (24 - 14.4) * ((100vw - 280px) / (1050 - 280))), 24px);  */
font-size: 1.6em;
margin : 0.5em 0 0.15em 0;
font-weight: 700;
}
.card p {
  transform:translateY(1em);
  line-height:1.6em;
  opacity:0;
  transition: all .7s cubic-bezier(.48,-0.28,0.41,1.4);
  font-weight: 400;
}
.card:hover p {
  transform:translateY(0);
  opacity:1;
  font-weight: 400;
}
.card .button {
  display: inline-block;
  padding: 15px 40px;
  border: none;
  background: #0b3f5b;
  color: white;
  font-size: 16px;
  letter-spacing: 1px;
  margin-top: 20px;
  transition: all .3s;
  cursor: pointer;
}

.card .button:hover {
  background: #63b8d6;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
  padding: 15px 50px;
}

.card .card-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}
@media (max-width:615px){
.card button {
display: none;
}
}