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

.contacts {
    margin: 10px auto 100px;
    max-width: 990px;

    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 {
    width: 48px;
    height: 48px;
    transition: transform 0.18s ease;
}

.contacts-icon svg path {
    fill: currentColor;
}


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

.contacts-box a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease, text-decoration 0.18s ease;
}

.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);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

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

}