.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0; }

.stat-card { width: 100%; height: 100%; justify-content: center; padding: 25px 30px; font-size: 20px; color: var(--views-white); background-color: var(--views-green); border-radius: 20px; }

.stat-icon { width: 48px; height: 48px; flex-shrink: 0; }

.stat-icon img { width: 100%; height: 100%; object-fit: contain; }

.stat-value { font-size: 40px; margin-bottom: 0; }

.stat-label { font-size: 20px; }

.stat-card-large { grid-row: span 2; }

.stat-card.stat-card-large { justify-content: flex-end; }

.stat-card-large .stat-value { font-size: 56px; }

.stat-card-large .stat-label { font-size: 32px; }

.light .stat-card { color: var(--views-green); background-color: #E6EADC; }

/* ====================================================== 

! Extra large devices (large desktops, less than 1600px)

====================================================== */

@media (max-width:1599.98px) {

 }

/* ========================================== 

! Large devices (desktops, less than 1200px)

=========================================== */

@media (max-width:1199.98px) {

 }

/*==========================================

! Medium devices (tablets, less than 992px)

========================================== */

@media (max-width:991.98px) {

 .stats-grid { grid-template-columns: 1fr; }

.stat-card-large { grid-row: auto; min-height: 274px; }

.stat-card-large .stat-value { font-size: 40px; }

.stat-card-large .stat-label { font-size: 20px; }

 }

/* =================================================  

! Small devices (landscape phones, less than 768px)

================================================= */

@media (max-width:767.98px) {

 }

/* ======================================================

! Extra small devices (portrait phones, less than 576px)

====================================================== */

@media (max-width:575.98px) {

 }