.social-media-grid {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-gap: 1.1rem;
    width: 100%;
    max-width: 360px; /* Adjust as needed */
    margin: 1.5rem auto;
}

.social-btn {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1.5px 12px rgba(0,0,0,0.11);
    font-size: 1.65rem;
    color: #156fa0;
    transition: 0.18s ease;
    text-decoration: none;
}

    .social-btn:hover, .social-btn:focus {
        background: #1cb5e0;
        color: #fff;
        box-shadow: 0 3px 24px rgba(28,181,224,0.28);
    }

    .social-btn i {
        pointer-events: none;
    }

/* Layouts for 1 to 5 buttons in a single row */
.social-count-1 {
    grid-template-columns: repeat(1, 52px);
}

.social-count-2 {
    grid-template-columns: repeat(2, 52px);
}

.social-count-3 {
    grid-template-columns: repeat(3, 52px);
}

.social-count-4 {
    grid-template-columns: repeat(4, 52px);
}

.social-count-5 {
    grid-template-columns: repeat(5, 52px);
}

/* 6 buttons -> 2 rows x 3 columns */
.social-count-6 {
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(2, 52px);
}

/* 7 buttons -> 3 rows; 1st & 3rd row 2 buttons, 2nd row 3 buttons */
.social-count-7 {
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
    grid-template-areas:
        "a b c"
        "d e f"
        "g h i";
    justify-content: center;
}
/* We'll assign grid areas dynamically in JS for layout purpose */
/* Alternatively simpler: fallback to default grid with gaps and centered */

/* 8 buttons -> 2 rows x 4 columns */
.social-count-8 {
    grid-template-columns: repeat(4, 52px);
    grid-template-rows: repeat(2, 52px);
}

/* 9 buttons -> 3 rows x 3 columns */
.social-count-9 {
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
}

/* Responsive adjustments for very small viewports */
@media (max-width: 375px) {
    .social-media-grid {
        max-width: 280px;
        grid-gap: 0.8rem;
    }

    .social-btn {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }
}
.social-media-grid {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-gap: 30px 36px; /* row-gap col-gap */
    width: 265px; /* (3 * 65px) + (2 * 36px) */
    margin: 2rem auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

.btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-btn {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1.5px 12px rgba(0,0,0,0.11);
    font-size: 1.65rem;
    color: #156fa0;
    margin-bottom: 0.45em;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    text-decoration: none;
    cursor: pointer;
}

    .social-btn:hover, .social-btn:focus {
        background: #1cb5e0;
        color: #fff;
        box-shadow: 0 3px 24px rgba(28,181,224,0.28);
    }

.contact-label {
    font-size: 13px;
    font-weight: 600;
    color: #323232;
    letter-spacing: 0.03em;
    text-align: center;
    user-select: none;
}

.social-btn i {
    pointer-events: none;
}

/* Responsive for small screens */
@media (max-width: 420px) {
    .social-media-grid {
        width: 99vw;
        grid-gap: 18px 18px;
    }

    .social-btn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .contact-label {
        font-size: 11px;
    }
}