﻿.report-grid {
    display: grid;
    /* ✅ 4 columns max on large screens */
    grid-template-columns: repeat(4, 20rem);
    gap: 1px;
    justify-content: center; /* center the whole grid */
    padding: 30px 0;
}

/* responsive fallback */
@media (max-width: 1400px) {
    .report-grid {
        grid-template-columns: repeat(3, 20rem);
    }
}

@media (max-width: 1100px) {
    .report-grid {
        grid-template-columns: repeat(2, 20rem);
    }
}

@media (max-width: 760px) {
    .report-grid {
        grid-template-columns: repeat(1, 20rem);
    }
}

/* ✅ keep your card exactly */
.report-card {
    height: 10rem;
    width: 20rem;
    background: var(--custom-white);
    border: 1px solid transparent !important;
    border-radius: 3px;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 18px;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .report-card:hover {
        border: 2px solid var(--primary05) !important;
        border-radius: 5px;
        color: var(--primary-color) !important;
    }

.report-icon {
    font-size: 2.5rem !important;
    line-height: 1;
    margin-bottom: 14px;
}

.report-title {
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    line-height: 1.1;
}
