/* Base = phones. No query needed — write phone styles here. */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 360px) {
    .mini-grid { grid-template-columns: repeat(2, 1fr); }
    
    header { display: none;
            flex-wrap: wrap;
            gap: 12px;
            max-height: none !important;
            padding: 12px 16px !important;}
}
.logogif {
width: 75px;
}
@media (min-width: 480px) {
    .mini-grid { grid-template-columns: repeat(2, 1fr); }
    .logogif {
width: 100px;
}
}
/* Big phones / small tablets: 640px and up */
@media (min-width: 640px) {
    .mini-grid { grid-template-columns: repeat(3, 1fr); }
}
.logogif {
width: 100px;
}

/* Tablets: 768px and up */
@media (min-width: 768px) {
    .mini-grid { grid-template-columns: repeat(4, 1fr); }
   .logogif {
width: 150px;
} 
}

/* Laptops: 1024px and up */
@media (min-width: 1024px) {
    .mini-grid { grid-template-columns: repeat(5, 1fr); }
    .logogif {
width: 250px;
}
}

/* Wide desktops: 1280px and up */
@media (min-width: 1280px) {
    .mini-grid { grid-template-columns: repeat(6, 1fr); }
    .logogif {
width: 300px;
}
}

/*--------------face ID------------------*/

 
/* Big phones / small tablets: 640px and up */
@media (min-width: 640px) {
    .mini-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablets: 768px and up */
@media (min-width: 768px) {
    .mini-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Laptops: 1024px and up */
@media (min-width: 1024px) {
    .mini-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Wide desktops: 1280px and up */
@media (min-width: 1280px) {
    .mini-grid { grid-template-columns: repeat(6, 1fr); }
}