.card-contact {
    @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 sm:w-1/2 text-red;
        }

        .picture {
            @apply order-1 md:order-2 ml-8 md:mr-8 mb-8 md:mb-0;
            width: 100px;
            height: 100px;
        }
    }

    .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;
            }
        }
    }

    &.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;
            }
        }
    }

    &.small {
        .contact-wrapper {
            @screen md {
                flex-direction: row;
            }

            .title {
                margin-bottom: 0;
            }

            .picture {
                @screen md {
                    order: 2;
                    flex-shrink: 0;
                    margin-right: 2rem;
                    margin-bottom: 0;
                    margin-left: 2rem;
                }
            }
        }
        .info-wrap {
            flex-direction: row;
        }
    }
}