/* =========================================================
   CONTACTS SECTION
   ========================================================= */

.contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

    justify-items: center;
}


/* =========================================================
   CONTACT BOX
   ========================================================= */

.contacts-box {
    width: 100%;
    max-width: 250px;
}


/* =========================================================
   ICON
   ========================================================= */

.contacts-icon {
    display: flex;
    justify-content: center;

    margin-bottom: 12px;

    flex-shrink: 0;

    color: var(--na-icon-color);
}

.contacts-icon svg {
    display: block;

    width: 48px;
    height: 48px;

    fill: currentColor;

    transition:
        transform var(--na-transition-fast);
}


/* =========================================================
   LINKS
   ========================================================= */

.contacts-box a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--na-transition-fast);
}

.contacts-box a:hover {
    color: var(--na-icon-color);
}

.contacts-box:hover a {
    text-decoration: underline;
}


/* =========================================================
   INTERACTION
   ========================================================= */

.contacts-box:hover .contacts-icon svg {
    transform: translateY(-4px) scale(1.1);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .contacts {
        grid-template-columns: 1fr;
    }
}