div#updates {
    padding: 20px 0px;
}

.what-we-include-title {
    font-size: 30px;
    font-family: 'EB Garamond';
    color: #7f1215;
    font-weight: bold;
    text-align: center;
    margin-bottom: 22px;
}

.grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
        }

        .card {
    background: rgba(255,255,255,0.95);
    border-radius: 3px;
    padding: 22px;
    width: calc(33.333% - 20px);
    min-width: 48%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    cursor: pointer;
    animation: fadeInUp 0.6s ease-out backwards;
    position: relative;
    overflow: hidden;
}

.card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: 20px;
    align-items: center;
}


        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .card:hover::before {
            left: 100%;
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }
        .card:nth-child(5) { animation-delay: 0.5s; }
        .card:nth-child(6) { animation-delay: 0.6s; }
        .card:nth-child(7) { animation-delay: 0.7s; }
        .card:nth-child(8) { animation-delay: 0.8s; }
        .card:nth-child(9) { animation-delay: 0.9s; }
        .card:nth-child(10) { animation-delay: 1s; }
        .card:nth-child(11) { animation-delay: 1.1s; }
        .card:nth-child(12) { animation-delay: 1.2s; }

        .card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

.icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 7px grey;
}
        .card:hover .icon-wrapper {
            transform: rotate(360deg) scale(1.1);
        }

        .icon {
            font-size: 35px;
            color: white;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        .card.loaded {
            animation: float 3s ease-in-out infinite;
        }

        .card.loaded:nth-child(odd) {
            animation: float 3s ease-in-out infinite;
            animation-delay: 0s;
        }

        .card.loaded:nth-child(even) {
            animation: float 3s ease-in-out infinite;
            animation-delay: 1.5s;
        }

        .card.loaded .icon-wrapper {
            animation: pulse 2s ease-in-out infinite;
        }

.card-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #1e5601;
    margin-bottom: 5px;
    line-height: 1.4;
    font-family: 'Aldrich';
}

.card-description {
    font-size: 1.1em;
    color: #1f1f1f;
    line-height: 1.5;
    margin-top: 10px;
}

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 968px) {
            .card {
                width: calc(50% - 15px);
            }
        }

        @media (max-width: 640px) {
            .card {
                width: 100%;
            }
            
            h1 {
                font-size: 2em;
            }
        }