.card-social {
    @apply pt-8 bg-white shadow-2xl;

    .contact-wrapper {
        @apply flex flex-col xl:flex-row justify-between mb-4;

        .title {
            @apply order-2 md:order-1 md:mb-4;
        }
    }

    .information {
        .info-wrap {
            @apply flex flex-col mb-2;

            .contact-label {
                @apply font-bold flex;
                width: 125px;

                .icon {
                    @apply mr-3 mt-1;
                }

                span.description {
                    width: 200px;
                }
            }

            span {
                overflow-wrap: anywhere;
            }
        }

        div {
            &::before {
                content: url(/assets/img/link-solid.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }

        .linkedin {
            &::before {
                content: url(/assets/img/linkedin_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .twitter {
            &::before {
                content: url(/assets/img/twitter_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .orcid {
            &::before {
                content: url(/assets/img/orcid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researcherid {
            &::before {
                content: url(/assets/img/researcherid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researchgate {
            &::before {
                content: url(/assets/img/researchgate_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .googlescholar {
            &::before {
                content: url(/assets/img/google_scholar_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
    }

    &.large-image {
        .contact-wrapper {
            @apply flex-col md:flex-col;

            .title {
                @apply order-2;
            }

            .picture {
                @apply order-1 w-full h-auto -mt-8 mx-0 mb-6;
            }
        }
    }
}
