.container {
    max-width: 1200px; /* Maksimum lebar kontainer */
    margin: 0 auto;    /* Pusatkan kontainer */
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Grid responsif */
    gap: 16px; /* Jarak antara kartu */
}

.card {
    background-color: white; /* Warna latar belakang kartu */
    border: 1px solid #e2e8f0; /* Border abu-abu */
    border-radius: 8px; /* Sudut melengkung */
    overflow: hidden; /* Sembunyikan bagian yang melampaui batas */
    transition: transform 0.3s, box-shadow 0.3s; /* Transisi efek */
    text-decoration: none; /* Hapus garis bawah */
}

.card:hover {
    transform: translateY(-4px); /* Efek hover: angkat kartu */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Bayangan saat hover */
}

.card-image {
    width: 100%; /* Lebar penuh */
    height: 200px; /* Tinggi tetap */
    object-fit: cover; /* Memastikan gambar mengisi area dengan baik */
}

.card-content {
    padding: 16px; /* Padding untuk konten kartu */
}

.card-title {
    font-size: 1.25rem; /* Ukuran font untuk judul */
    font-weight: bold; /* Tebal */
    color: #2d3748; /* Warna abu-abu gelap */
}

.card-author,
.card-year,
.card-stock {
    font-size: 0.875rem; /* Ukuran font untuk informasi */
    color: #4a5568; /* Warna abu-abu */
    margin-top: 4px; /* Jarak atas */
}