/* ============================================================
   BOCCEMANIA - HOMEPAGE
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #000;
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.home {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 10px 18px 45px;
}


/* ============================================================
   HERO
   ============================================================ */

.hero-brand {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(260px, 390px)
        minmax(190px, 1fr);

    align-items: center;
    gap: 18px;

    padding: 2px 0 4px;
}

.hero-logo {
    display: flex;
    justify-content: center;
}

.hero-logo img {
    width: min(100%, 300px);
    height: auto;
    display: block;
}

.hero-phrase,
.follow-us {
    font-family: 'Oswald', Impact, sans-serif;
    line-height: .95;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.hero-left {
    justify-self: end;
    font-size: clamp(28px, 4.2vw, 48px);
}

.hero-right {
    justify-self: start;
    font-size: clamp(18px, 2.6vw, 30px);
    max-width: 260px;
    white-space: normal;
}


/* ============================================================
   SOCIAL TOP
   ============================================================ */

.social-section {
    text-align: center;
    margin: 2px 0 24px;
}

.follow-us {
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.social-icons a {
    width: 48px;
    height: 48px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #111;
    border: none;

    font-size: 22px;

    transition:
        transform .18s ease,
        background .18s ease;
}

.social-icons a:hover {
    transform: scale(1.06);
    background: #171717;
}


/* ============================================================
   VIDEO
   ============================================================ */

.featured-videos {
    display: grid;

    grid-template-columns:
        minmax(0, 1.30fr)
        minmax(250px, .72fr);

    gap: 16px;
    align-items: start;

    width: 94%;
    margin: 0 auto 24px;
}

.main-video {
    display: block;
    min-width: 0;
}

.youtube-featured {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 9;

    border: 3px solid #fcd705;
    border-radius: 3px;

    background: #111;
}

.youtube-featured img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.play.big {
    width: 72px;
    height: 72px;

    font-size: 28px;
}

.youtube-badge {
    position: absolute;

    left: 10px;
    bottom: 9px;

    padding: 6px 10px;

    border-radius: 4px;

    background: rgba(0, 0, 0, .82);

    color: #fff;

    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.youtube-badge i {
    color: #ff0000;
    margin-right: 5px;
}

.main-video-title {
    font-family: 'Oswald', Impact, sans-serif;
    font-size: clamp(20px, 2.5vw, 30px);
    margin-top: 7px;
}

.main-video-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: #bbb;
}


/* ============================================================
   VIDEO PICCOLI
   ============================================================ */

.side-videos {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    align-content: start;

    min-width: 0;
}

.side-videos .videos-heading {
    grid-column: 1 / -1;

    font-family: 'Oswald', Impact, sans-serif;

    color: #fff;

    font-size: clamp(25px, 3.4vw, 36px);

    line-height: 1;

    letter-spacing: 1px;

    text-align: left;

    margin: 0 0 2px;
}

.video-side {
    display: block;
    min-width: 0;
}

.youtube-side {
    position: relative;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 9;

    border-radius: 3px;
    border: 2px solid #222;

    background: #111;
}

.youtube-side img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.play {
    position: absolute;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: rgba(0, 0, 0, .82);

    color: #fcd705;

    display: grid;
    place-items: center;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-size: 16px;
}

.video-side > .video-views {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 5px;

    width: 100%;

    min-height: 20px;

    margin-top: 5px;

    text-align: center;

    font-family: 'Oswald', Impact, sans-serif;

    font-size: 11px;

    line-height: 1.2;

    white-space: nowrap;
}

.video-views {
    color: #fcd705;
    letter-spacing: .4px;
}

.video-views strong {
    color: #fff;
    font-weight: 700;
}


/* ============================================================
   FANTABOCCE
   ============================================================ */

.fantabocce-section {
    text-align: center;

    padding-top: 10px;

    margin-bottom: 15px;
}


/*
   MODIFICA:
   PARTECIPA AL e GUARDA IL NOSTRO hanno la stessa gerarchia
*/

.section-title,
.shop-title {
    font-family: 'Oswald', Impact, sans-serif;

    font-size: clamp(28px, 4vw, 40px);

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;

    margin-bottom: 20px;

    color: #fff;
}

.fantabocce-button {
    width: min(100%, 680px);

    min-height: 92px;

    margin: 0 auto;

    padding: 12px 30px;

    border: 4px solid #fcd705;

    border-radius: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 22px;

    background: #050505;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: clamp(30px, 4vw, 44px);

    font-weight: 800;
    font-style: italic;

    color: #fcd705;

    box-shadow: 0 0 18px rgba(252, 215, 5, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.fantabocce-button:hover {
    transform: scale(1.02);

    box-shadow:
        0 0 25px rgba(252, 215, 5, .30);
}

.fake-fantabocce-logo {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #163c73;

    color: #fff;

    border: 3px solid #fcd705;

    font-style: normal;

    font-size: 31px;
}


/* ============================================================
   PARTE BASSA
   ============================================================ */

.bottom-section {
    width: 100%;

    margin-top: 70px;
}


/* ============================================================
   SHOP
   ============================================================ */

.shop-section {
    text-align: center;

    margin-bottom: 70px;
}

.bottom-title {
    font-family: 'Oswald', Impact, sans-serif;

    font-weight: 700;

    text-transform: uppercase;

    color: #fff;
}

.shop-title {
    line-height: 1;

    margin-bottom: 20px;
}

.shop-button {
    width: min(100%, 560px);

    height: 140px;

    margin: 0 auto;

    padding: 12px 30px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 5px solid #fcd705;

    border-radius: 30px;

    background: #000;

    transition: transform .2s ease;
}

.shop-button:hover {
    transform: scale(1.02);
}

.shop-ball {
    width: 66px;
    height: 66px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ff9d00 0,
            #ff5b00 35%,
            #b51f00 75%,
            #5b0b00 100%
        );

    border: none;

    display: grid;
    place-items: center;

    text-align: center;

    color: #fcd705;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 10px;

    font-weight: 900;

    line-height: .9;
}

.shop-word {
    flex: 1;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: clamp(42px, 5.8vw, 64px);

    font-weight: 900;

    font-style: italic;

    color: #fcd705;

    line-height: 1;

    letter-spacing: -3px;
}

.shop-shirt {
    width: 72px;

    display: flex;

    justify-content: center;

    font-size: 64px;

    color: #222;
}


/* ============================================================
   SOCIAL WALL
   ============================================================ */

.social-wall-section {
    margin-bottom: 70px;
}

.social-wall-title {
    text-align: center;

    color: #fcd705;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: clamp(32px, 4.8vw, 48px);

    font-weight: 900;

    font-style: italic;

    line-height: 1;

    margin-bottom: 24px;
}

.social-wall-box {
    width: min(100%, 900px);

    min-height: 330px;

    margin: 0 auto;

    padding: 26px 35px;

    border: 5px solid #fcd705;

    border-radius: 30px;

    display: grid;

    grid-template-columns:
        1fr
        1.15fr
        1fr;

    align-items: center;

    gap: 30px;

    background: #000;
}

.social-wall-card {
    height: 278px;

    border-radius: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 20px;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 22px;

    font-weight: 900;

    font-style: italic;

    line-height: 1.1;

    color: #000;
}

.instagram-card {
    background: #ff0070;
}

.facebook-card {
    background: #1814ff;

    color: #fff;
}

.social-wall-center {
    text-align: center;
}

.social-wall-number {
    font-family: 'Oswald', Impact, sans-serif;

    color: #fcd705;

    font-size: clamp(28px, 4vw, 45px);

    line-height: 1;

    white-space: nowrap;
}

.social-wall-subtitle {
    margin-top: 10px;

    font-family: 'Oswald', Impact, sans-serif;

    color: #fcd705;

    font-size: clamp(20px, 2.5vw, 30px);

    line-height: 1.05;
}


/* ============================================================
   PARTNER / SPONSOR
   ============================================================ */

.partners-section {
    position: relative;

    overflow: hidden;

    width: 100%;

    padding: 20px 20px 50px;

    text-align: center;
}

.partners-watermark {
    position: absolute;

    left: 50%;
    top: 90px;

    width: 95%;

    transform: translateX(-50%);

    opacity: .055;

    z-index: 0;

    pointer-events: none;
}

.partner-group {
    position: relative;

    z-index: 1;

    margin-bottom: 55px;
}

.partner-title {
    font-family: 'Montserrat', Arial, sans-serif;

    color: #fff;

    font-size: clamp(25px, 3.5vw, 38px);

    font-weight: 900;

    font-style: italic;

    margin-bottom: 20px;
}

.partner-logos {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;
}

.partner-logo {
    width: 140px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 2px;
}
.partner-logo.logo-grande img {
    transform: scale(2.1);
}

.partner-logo.logo-piccolo img {
    transform: scale(1.2);
}


.partner-logo img {
    max-width: 100%;
    max-height: 100%;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* ============================================================
   GOLDEN PARTNER
   ============================================================ */

/*
   MODIFICA:
   eliminato lo sfondo nero semitrasparente.
   Manteniamo esattamente spaziature e dimensioni.
*/

.golden-logos {
    gap: 60px;

    padding: 20px 30px;

    background: transparent;

    border-radius: 25px;
}

.golden-logos .partner-logo {
    width: 220px;
    height: 110px;
    padding: 3px;
    background: #ffffff;
    border: none;
    border-radius: 14px;
}

/* ============================================================
   PARTNER
   ============================================================ */

/*
   MODIFICA:
   eliminato lo sfondo nero semitrasparente.
*/

.partner-row {
    gap: 25px;

    padding: 24px 20px;

    background: transparent;

    border-radius: 25px;
}


/* ============================================================
   SPONSOR
   ============================================================ */

/*
   MODIFICA:
   eliminato lo sfondo nero semitrasparente.
*/

.sponsor-row {
    gap: 20px;

    padding: 24px 20px;

    background: transparent;

    border-radius: 25px;
}


/* ============================================================
   LOGHI PLACEHOLDER
   ============================================================ */

.partner-placeholder {
    width: 105px;
    height: 105px;

    border-radius: 50%;

    background: #d8d8d8;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #555;

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 12px;

    font-weight: 800;
}

.golden-logos .partner-placeholder {
    width: 105px;
    height: 105px;
}

.sponsor-row .partner-placeholder {
    width: 82px;
    height: 82px;
}

.sponsor-group {
    margin-bottom: 30px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    position: relative;

    min-height: 190px;

    padding: 20px 0 20px;

    text-align: center;

    z-index: 2;
}

.footer-links {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 22px;

    font-family: 'Oswald', Impact, sans-serif;

    font-size: 22px;

    color: #fff;
}

.footer-links a:hover {
    color: #fcd705;
}

.footer-line {
    width: 285px;

    max-width: 80%;

    height: 1px;

    background: #fff;

    margin: 12px auto 18px;
}

.footer-contact-title {
    font-family: 'Oswald', Impact, sans-serif;

    font-size: 24px;

    margin-bottom: 8px;
}

.footer-email {
    font-family: 'Oswald', Impact, sans-serif;

    font-size: 16px;

    color: #fff;
}

.footer-email a {
    color: #fff;
}

.footer-email a:hover {
    color: #fcd705;
}

.footer-logo {
    position: absolute;

    right: 15px;
    bottom: 8px;

    width: 105px;

    height: auto;

    opacity: .9;
}


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

@media (max-width: 700px) {

    .home {
        padding: 10px 14px 50px;
    }


    /* HERO */

    .hero-brand {
        grid-template-columns: 1fr auto 1fr;

        gap: 8px;

        padding-top: 2px;
    }

    .hero-logo img {
        width: min(45vw, 250px);
    }

    .hero-left {
        justify-self: end;

        font-size: clamp(24px, 7vw, 38px);
    }

    .hero-right {
        justify-self: start;

        font-size: clamp(14px, 4vw, 22px);

        max-width: 125px;
    }


    /* SOCIAL */

    .social-section {
        margin: 4px 0 28px;
    }

    .follow-us {
        font-size: 29px;

        margin-bottom: 10px;
    }

    .social-icons {
        gap: 13px;
    }

    .social-icons a {
        width: 49px;
        height: 49px;

        font-size: 22px;
    }


    /* VIDEO */

    .featured-videos {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 22px;

        margin-bottom: 45px;
    }

    .main-video {
        order: 1;

        width: 100%;
    }

    .side-videos {
        order: 2;

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .side-videos .videos-heading {
        grid-column: 1 / -1;

        text-align: left;

        font-size: 29px;

        margin-bottom: 2px;
    }

    .youtube-featured {
        border-width: 3px;
    }

    .play.big {
        width: 62px;
        height: 62px;

        font-size: 24px;
    }


    /* FANTABOCCE */

    .fantabocce-section {
        padding-top: 8px;

        margin-bottom: 20px;
    }

    .section-title,
    .shop-title {
        font-size: 31px;

        margin-bottom: 18px;
    }

    .fantabocce-button {
        width: 100%;

        min-height: 88px;

        border-width: 4px;

        border-radius: 22px;

        padding: 12px 18px;

        gap: 16px;

        font-size: clamp(27px, 7vw, 38px);
    }

    .fake-fantabocce-logo {
        width: 54px;
        height: 54px;

        font-size: 28px;
    }


    /* PARTE BASSA */

    .bottom-section {
        margin-top: 60px;
    }


    /* SHOP */

    .shop-section {
        margin-bottom: 55px;
    }


    .shop-button {
        width: 100%;

        height: 105px;

        border-width: 4px;

        border-radius: 24px;

        padding: 10px 16px;
    }

    .shop-ball {
        width: 52px;
        height: 52px;

        font-size: 8px;
    }

    .shop-word {
        font-size: 52px;

        letter-spacing: -2px;
    }

    .shop-shirt {
        width: 50px;

        font-size: 42px;
    }


    /* SOCIAL WALL */

    .social-wall-section {
        margin-bottom: 55px;
    }

    .social-wall-title {
        font-size: 34px;

        margin-bottom: 18px;
    }

    .social-wall-box {
        width: 100%;

        min-height: 0;

        padding: 18px;

        border-width: 4px;

        border-radius: 25px;

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .social-wall-card {
        height: 135px;

        border-radius: 18px;

        font-size: 20px;
    }

    .social-wall-center {
        order: -1;
    }

    .social-wall-number {
        font-size: 32px;
    }

    .social-wall-subtitle {
        font-size: 23px;

        margin-top: 6px;
    }


    /* PARTNER */

    .partners-section {
        padding-left: 5px;
        padding-right: 5px;
    }

    .partner-group {
        margin-bottom: 45px;
    }

    .partner-title {
        font-size: 28px;

        margin-bottom: 17px;
    }

    .partner-logos {
        gap: 15px;
    }

    .golden-logos {
        gap: 25px;

        padding: 18px 15px;

        background: transparent;
    }

    .partner-row {
        gap: 10px;

        padding: 18px 10px;

        background: transparent;
    }

    .sponsor-row {
        gap: 10px;

        padding: 18px 10px;

        background: transparent;
    }

    .partner-placeholder {
        width: 78px;
        height: 78px;
    }

    .golden-logos .partner-placeholder {
        width: 88px;
        height: 88px;
    }

    .partner-row .partner-placeholder {
        width: 58px;
        height: 58px;
    }

    .sponsor-row .partner-placeholder {
        width: 58px;
        height: 58px;
    }


    /* LOGHI REALI MOBILE */

    .partner-logo {
        width: 78px;
        height: 58px;

        padding: 4px;
    }

    .golden-logos .partner-logo {
        width: 88px;
        height: 58px;

        padding: 5px;
    }


    /* FOOTER */

    .site-footer {
        min-height: 180px;

        padding-top: 5px;
    }

    .footer-links {
        font-size: 20px;

        gap: 18px;
    }

    .footer-line {
        width: 250px;

        max-width: 75%;
    }

    .footer-contact-title {
        font-size: 23px;
    }

    .footer-email {
        font-size: 14px;
    }

    .footer-logo {
        position: static;

        display: block;

        width: 90px;

        margin: 22px auto 0;
    }

}


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

@media (max-width: 430px) {

    .home {
        padding-left: 10px;
        padding-right: 10px;
    }


    /* HERO */

    .hero-brand {
        gap: 4px;
    }

    .hero-logo img {
        width: 48vw;
    }

    .hero-left {
        font-size: 23px;
    }

    .hero-right {
        font-size: 13px;

        max-width: 92px;
    }


    /* SOCIAL */

    .follow-us {
        font-size: 25px;
    }

    .social-icons {
        gap: 10px;
    }

    .social-icons a {
        width: 45px;
        height: 45px;

        font-size: 20px;
    }


    /* VIDEO */

    .side-videos {
        gap: 10px;
    }

    .side-videos .videos-heading {
        font-size: 27px;
    }

    .video-side > .video-views {
        font-size: 10px;
    }

    .main-video-title {
        font-size: 25px;
    }

    .main-video-subtitle {
        font-size: 12px;
    }


    /* FANTABOCCE */

    .section-title,
    .shop-title {
        font-size: 28px;

        margin-bottom: 18px;
    }

    .fantabocce-button {
        min-height: 82px;

        gap: 12px;

        padding: 10px 12px;

        font-size: 29px;
    }

    .fake-fantabocce-logo {
        width: 50px;
        height: 50px;

        font-size: 26px;
    }


    /* SHOP */

    .shop-button {
        height: 88px;

        border-radius: 20px;

        padding: 8px 10px;
    }

    .shop-ball {
        width: 43px;
        height: 43px;

        font-size: 6px;
    }

    .shop-word {
        font-size: 42px;
    }

    .shop-shirt {
        width: 40px;

        font-size: 34px;
    }


    /* SOCIAL WALL */

    .social-wall-title {
        font-size: 29px;
    }

    .social-wall-box {
        padding: 13px;

        border-radius: 22px;
    }

  .social-wall-card {
    height: 240px;
    font-size: 18px;
}

    .social-wall-number {
        font-size: 28px;
    }

    .social-wall-subtitle {
        font-size: 20px;
    }


    /* PARTNER */

    .partner-title {
        font-size: 25px;
    }

    .golden-logos {
        padding: 15px 10px;

        background: transparent;
    }

    .golden-logos .partner-placeholder {
        width: 78px;
        height: 78px;
    }

    .partner-row {
        padding: 15px 6px;

        background: transparent;
    }

    .partner-row .partner-placeholder {
        width: 50px;
        height: 50px;

        font-size: 8px;
    }

    .sponsor-row {
        gap: 7px;

        padding: 15px 6px;

        background: transparent;
    }

    .sponsor-row .partner-placeholder {
        width: 43px;
        height: 43px;

        font-size: 7px;
    }


    /* LOGHI REALI MOBILE PICCOLO */

    .partner-logo {
        width: 68px;
        height: 48px;

        padding: 3px;
    }

    .golden-logos .partner-logo {
        width: 78px;
        height: 48px;

        padding: 4px;
    }


    /* FOOTER */

    .footer-links {
        font-size: 18px;
    }

    .footer-email {
        font-size: 12px;
    }

    .footer-logo {
        width: 80px;
    }

}

/* SHOP - COMING SOON */


.shop-coming-soon {
    position: relative;
    cursor: default;
    overflow: hidden;
}

.coming-soon-badge {
    position: absolute;
    top: 14px;
    right: -42px;
    transform: rotate(35deg);
    background: #fcd705;
    color: #00142f;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 45px;
    letter-spacing: 1px;
    white-space: nowrap;
    z-index: 5;
}


/* ============================================================
   SOCIAL WALL - ANTEPRIME SOCIAL
   ============================================================ */

.social-wall-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

.social-wall-card:hover {
    transform: scale(1.02);
}

.social-preview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: #111;
}

/* Etichetta social */

.social-preview-label {
    position: absolute;
    top: 12px;
    left: 12px;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 8px;

    background: rgba(0, 0, 0, .78);

    color: #fff;

    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;

    pointer-events: none;
}

.social-preview-label i {
    font-size: 16px;
}

/* Instagram */

.instagram-card {
    background: #ff0070;
}

.instagram-card iframe {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    border: 0;

    background: #fff;
}

/* Facebook */

.facebook-card {
    background: #1814ff;
    color: #fff;
}

.facebook-card iframe {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    border: 0;

    background: #fff;
}


/* ============================================================
   SOCIAL WALL - MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .social-wall-card {
    height: 260px;
    border-radius: 18px;
    font-size: 20px;
}

    .social-preview {
        border-radius: 18px;
    }

    .social-preview-label {
        top: 10px;
        left: 10px;

        font-size: 11px;
        padding: 6px 9px;
    }

}


.facebook-card {
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

.facebook-card .social-preview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: #111;
}

.facebook-card .social-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.social-preview-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.social-preview-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-preview-play::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #fff;
    margin-left: 4px;
}

.facebook-card:hover .social-preview-play {
    transform: translate(-50%, -50%) scale(1.08);
}


/* MOBILE */
@media (max-width: 700px) {

    .instagram-card {
        height: 500px;
        overflow: hidden;
    }

    .instagram-card .social-preview {
        height: 500px;
        overflow: hidden;
    }

    .instagram-card iframe {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform: none;
    }
}