.areas {
    padding: 110px 0;
    background: var(--background);
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.area-card {
    background: white;
    padding: 30px 20px;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: .3s;
}

.area-card:hover {
    transform: translateY(-6px);
    color: var(--green);
}