/* Dedicated social links stylesheet with simpler, broader browser support. */

.social-links-grid {
    grid-column:1 / -1;
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-align:stretch;
    -ms-flex-align:stretch;
    align-items:stretch;
    margin:-6px;
    padding:0;
}

.social-link {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-flex:1;
    -ms-flex:1 1 280px;
    flex:1 1 280px;
    max-width:calc(33.333% - 12px);
    min-width:0;
    min-height:104px;
    margin:6px;
    padding:14px 16px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.14);
    background-color:#321a10;
    background-image:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 58%);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    color:#fff4d9;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.social-link:hover,
.social-link:focus-visible {
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(0,0,0,.28);
}

.social-link:focus-visible {
    outline:2px solid rgba(255,244,217,.9);
    outline-offset:3px;
}

.social-link-network {
    display:inline-block;
    -ms-flex-negative:0;
    flex-shrink:0;
    min-width:118px;
    margin-right:14px;
    padding:10px 16px 8px;
    border-radius:999px;
    font-family:"Teko", sans-serif;
    font-size:1.05rem;
    line-height:1;
    letter-spacing:.12em;
    text-align:center;
    text-transform:uppercase;
}

.social-link-copy {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    min-width:0;
}

.social-link-copy strong {
    display:block;
    width:100%;
    font-family:"Teko", sans-serif;
    font-size:1.9rem;
    line-height:.88;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.social-link .hover-arrow {
    -ms-flex-negative:0;
    flex-shrink:0;
    margin-left:12px;
}

.social-link-instagram {
    background-color:#4b1930;
    background-image:linear-gradient(135deg, rgba(131,58,180,.28), rgba(225,48,108,.24) 46%, rgba(252,176,69,.18));
    border-color:rgba(225,48,108,.28);
}

.social-link-instagram .social-link-network {
    color:#fff4fa;
    background-color:#c13584;
    background-image:linear-gradient(135deg, #833ab4, #e1306c 55%, #fcb045);
}

.social-link-instagram:hover,
.social-link-instagram:focus-visible {
    border-color:rgba(252,176,69,.42);
}

.social-link-youtube {
    background-color:#4a100d;
    background-image:linear-gradient(135deg, rgba(255,76,76,.24), rgba(201,0,0,.2) 58%, rgba(255,255,255,.04));
    border-color:rgba(255,76,76,.3);
}

.social-link-youtube .social-link-network {
    color:#fff5f5;
    background-color:#d40000;
    background-image:linear-gradient(180deg, #ff4747, #c40000);
}

.social-link-youtube:hover,
.social-link-youtube:focus-visible {
    border-color:rgba(255,101,101,.44);
}

.social-link-x {
    background-color:#1c1816;
    background-image:linear-gradient(135deg, rgba(84,84,84,.16), rgba(16,16,16,.18) 50%, rgba(255,255,255,.04));
    border-color:rgba(255,255,255,.16);
}

.social-link-x .social-link-network {
    color:#f2f2f2;
    background-color:#111;
    background-image:linear-gradient(180deg, #3f3f3f, #111);
}

.social-link-x:hover,
.social-link-x:focus-visible {
    border-color:rgba(255,255,255,.28);
}

@media(max-width:980px) {
    .social-link {
        max-width:calc(50% - 12px);
    }

    .social-link-copy strong {
        font-size:1.7rem;
    }
}

@media(max-width:760px) {
    .social-links-grid {
        margin:-5px 0 0;
    }

    .social-link {
        max-width:none;
        min-height:90px;
        margin:5px 0 0;
        padding:12px 14px;
    }

    .social-link-network {
        min-width:104px;
        margin-right:12px;
        padding:9px 14px 7px;
        font-size:.96rem;
    }

    .social-link-copy strong {
        font-size:1.45rem;
    }
}