/* custom.css */
.trending-section {
    padding: 3rem 0;
}
.card-img-container {
    position: relative;
    /* ความสูงเริ่มต้นสำหรับบัตรเล็ก */
    height: 300px; 
    overflow: hidden; 
    border-radius: 1rem; 
    transition: transform 0.3s ease; /* เพิ่ม Transition เพื่อให้เกิด effect เมื่อ Hover */
}

/* ปรับความสูงสำหรับบัตรใหญ่ */
.large-card-height {
    /* ความสูงให้ใกล้เคียง 2 แถวของบัตรเล็ก + ช่องว่าง */
    height: 620px; 
    width: 500px;
    display: flex;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 1rem;
    transition: transform 0.5s ease;
}

/* สไตล์สำหรับลิงก์ */
.card-link {
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: inherit; /* ใช้สีตัวอักษรปกติ */
    display: block; /* ทำให้ลิงก์ครอบคลุม Card ทั้งหมด */
}
.card-link:hover .card-img-container {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเมื่อเมาส์อยู่เหนือ */
}
.card-link:hover .card-img-top {
    transform: scale(1.05); /* ซูมรูปภาพเล็กน้อยเมื่อเมาส์อยู่เหนือ */
}


.card-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: white;
    font-size: 1.25rem; 
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); 
    z-index: 10;
}

.col-6 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: 48%;
    height: 48%;
}