.simpleblogcard-template-gridcard {
container-type: inline-size;
margin: 24px 0;
}
.simpleblogcard-template-gridcard .card {
width: 100%;
height: auto;
background-color: #fff;
box-shadow: 2px 2px 4px #c0c0c080, -1px -1px 4px #c0c0c080;
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 0;
margin: 0;
}
.simpleblogcard-template-gridcard .card:hover {
box-shadow: 2px 2px 8px #c0c0c080, -1px -1px 8px #c0c0c080;
}
.simpleblogcard-template-gridcard .card-image {
margin: 0;
background-color: #ccc;
}
.simpleblogcard-template-gridcard .card-image img{
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: top;
}
.simpleblogcard-template-gridcard .card-content {
padding: 16px 24px;
}
.simpleblogcard-template-gridcard .card-host {
margin: 0;
color: #888;
font-size: 80%;
}
.simpleblogcard-template-gridcard .card-title {
margin: 4px 0;
font-weight: bold;
text-transform: none;
color: #444;
}
.simpleblogcard-template-gridcard .card-description {
font-weight: normal;
text-transform: none;
color: #666;
font-size: 90%;
}
@container (max-width: 380px) {
.simpleblogcard-template-gridcard .card {
display: block;
}
}