/* ===========================
   Stili Personalizzati
   =========================== */
body{
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
}

.grid-overlay {
    position: absolute;
    inset: 0; 
    background: url('/image/grid.png') center center no-repeat;
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.hero{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(142deg, #000000 0%, #353535 100%);
    box-shadow: inset 0 0 0 1px #000, 0 10px 20px rgba(0,0,0,0.3);
    overflow: hidden; 
}

.hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 60px);
}

.color-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: clamp(150px, 30vw, 250px); 
    aspect-ratio: 1 / 1;
    padding: 1.5rem;
}

.color-box a {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    text-transform: uppercase;
}

/******** RESPONSIVE *******/
@media (max-width: 767.98px) {
    .row.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .color-box {
        width: 100%;
        aspect-ratio: auto;
    }
}