:root {
    --social-width: 420px;
}

.social-section {
    width: calc(50% - 50px);
    /* margin: 0px auto 0 auto;*/
}

/* Wrapper */
.social-wrapper {
    position: relative;
    /* width: 100%; */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
    box-sizing: border-box;
    /* margin: 65px auto 0; */
    margin: 65px auto 0;

}

/* Aspect ratios */
.social-wrapper[data-aspect="16/9"] {
    aspect-ratio: 16 / 9;
}

.social-wrapper[data-aspect="4/5"] {
    aspect-ratio: 4 / 5;
}

/* Fallback */
.social-wrapper:not(:where([style*="aspect-ratio"])) {
    padding-bottom: 100%;
    height: 455px;
    width: 100%;
    max-width: 100%;
}

/* Fill content */
.social-wrapper blockquote,
.social-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border: 0;
}

/* Fallback UI */
.social-fallback {
    display: none;
    position: absolute;
    inset: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
}

.social-fallback a,
.social-noscript a {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    background: #2b6cb0;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
}

.social-noscript {
    padding: 10px;
    text-align: center;
    background: #fff8;
    border-radius: 6px;
    font-size: 13px;
}

/* Loading */
.social-wrapper .social-loading {
    width: 100%;
    min-height: 140px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 14px;
}

/* Dots */
.loader-dots {
    display: inline-flex;
    gap: 8px;
}

.loader-dots .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2b6cb0;
    animation: bounce 0.9s infinite;
}

.loader-dots .dot:nth-child(2) {
    animation-delay: 0.1s;
}

.loader-dots .dot:nth-child(3) {
    animation-delay: 0.2s;
}

/* Skeleton */
.skeleton {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton .line {
    height: 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f3f3f3 25%, #ececec 37%, #f3f3f3 63%);
    background-size: 400% 100%;
    animation: shimmer 1.6s infinite;
}

.skeleton .long {
    width: 100%;
}

.skeleton .mid {
    width: 78%;
}

.skeleton .short {
    width: 52%;
}

/* Animations */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
/* @media (max-width: 420px) {
    :root {
        --social-width: 320px;
    }

} */

@media (max-width: 1000px) {
    .social-wrapper {
        margin: 0;
        max-width: 640px;
    }

}