#main-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .single-card{
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f1f1f1;
        border: 4px solid #333;
        box-shadow:
            inset -4px -4px 0 #b0b08c,
            inset 4px 4px 0 #50503c,
            4px 4px 0 #222;
        border-radius: 4px;
        margin: 32px;
        padding: 12px;
        width: 12%;
        height: auto;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;

        @media (max-width: 1696px){
            width: 14%;
        }
        @media (max-width: 1454px){
            width: 16%;
        }
        @media (max-width: 1272px){
            width: 18%;
        }
        @media (max-width: 1131px){
            width: 20%;
        }
        @media (max-width: 1018px){
            width: 22%;
        }
        @media (max-width: 927px){
            width: 24%;
        }
        @media (max-width: 848px){
            width: 28%;
            margin: 16px;
        }
        @media (max-width: 729px){
            width: 30%;
            margin: 8px;
        }
        @media (max-width: 681px){
            width: 46%;
        }
        @media (max-width: 443px){
            width: 92%;
        }

        .card-header{
            display: flex; 
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 500;
            width: 100%;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;

            .header-number{
                font-size: 14px;
            }
        }
        .card-image{
            width: 96px;
            height: 96px;
            object-fit: contain;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            transition: transform 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 16px;

            img{
                width: 96px;
                height: 96px;
                object-fit: contain;
                transition: opacity 0.2s ease;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                image-rendering: pixelated;
            }
            .pokemon-static {
                z-index: 1;
                opacity: 1;
            }
            .pokemon-gif {
                z-index: 2;
                opacity: 0;
            }
        }
        .card-types{
            text-align: center;

            .pokemon-type {
                display: inline-block;
                padding: 4px 8px;
                margin: 2px;
                font-size: 18px;
                border: 2px solid #000;
                border-radius: 4px;
                text-shadow: 1px 1px 0 #000;
                box-shadow: 2px 2px 0 #000;
                color: white;
            }
        }
    }
    .single-card:hover {
        background: var(--type-bg-color);
        transform: translateY(-5px);
        color: white;
        box-shadow: 2px 2px 0 #000;
    }
    .single-card:hover .pokemon-static {
        opacity: 0;
    }
    .single-card:hover .pokemon-gif {
        opacity: 1;
    }
    
}