.mto-tagline {
font-size: 1.2em;
color: #0073aa;
text-align: center;
margin: 20px 0;
} .reading-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
animation: fadeIn 1s ease-in-out;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.card img {
width: 100%;
height: 160px;
object-fit: cover;
}
.card-content {
padding: 1rem;
}
.card-title {
font-size: 1.1rem;
margin: 0 0 0.5rem;
color: #222;
}
.card-desc {
font-size: 0.95rem;
color: #666;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}