.container {
    display: flex;
    gap: 20px;
    text-align: center;
    justify-content: center;
    margin: auto;
    flex-wrap: wrap; /* Kartların yan yana sığmadığında alt satıra geçmesini sağlar */
}

.card {
    width: 350px; /* Masaüstü için genişlik */
    height: 600px; /* Masaüstü için yükseklik */
    border: 3px solid #333;
    display: flex; 
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s; /* Animasyon sürelerini ekle */
    text-decoration: none;
    
}

.card img {
    width: 100%;
    height: auto; /* Yüksekliği otomatik ayarla */
    object-fit: cover; /* Resmin orantılı görünmesi için */
}

.card:hover {
    transform: scale(1.05); /* Kartı büyüt */
    animation: borderAnimation 1.5s infinite; /* Sınırsız animasyon */
}

/* Sınır rengi animasyonu */
@keyframes borderAnimation {
    0% { border-color: purple; }
    25% { border-color: orange; }
    50% { border-color: blue; }
    75% { border-color: yellow; }
    100% { border-color: purple; }
}

/* Mobil görünüm için medya sorgusu */
@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Kartları dikey dizilimde göster */
        align-items: center; /* Kartları ortala */
    }

    .card {
        width: 90%; /* Genişliği %90 yapalım */
        height: auto; /* Yüksekliği otomatik ayarla */
    }

    .card img {
        height: 100%; /* Resim yüksekliğini kart yüksekliğine ayarla */
        width: auto; /* Genişliği otomatik ayarla */
    }
}