.technologies {
    background: var(--color-background);
}

.technologies__eyebrow {
    margin: 0 0 var(--space-sm);

    color: var(--color-text-muted);

    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.technologies__grid {
    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(160px, 1fr)
    );

    gap: var(--space-md);
}

.technology-card {
    padding: var(--space-lg);

    border: 1px solid var(--color-border);

    border-radius: 8px;

    background: var(--color-background);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.technology-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}

.technology-card__title {
    margin: 0;

    font-size: 18px;
}

/*
|--------------------------------------------------------------------------
| Technologies — Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .technologies__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .technologies__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }


    .technology-card {
        padding: 20px;
    }


    .technology-card__title {
        font-size: 16px;
    }


    .technology-card__description {
        font-size: 14px;
        line-height: 1.6;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

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


    .technology-card {
        padding: 18px;
    }

}