.tpl-wiw-detail {
    @apply md:bg-gray-300 pb-8 md:p-8;

    .wrapper-wiw-detail {
        @apply lg:grid grid-cols-12 gap-10;
        @apply mb-8;

        .left {
            @apply col-span-3;
        }

        .right {
            @apply md:p-6 md:bg-white md:shadow-2xl md:z-20 col-span-9;
        }
    }

    .wrapper-info {
        @apply lg:grid grid-cols-12 gap-10;

        .left {
            @apply col-span-3;
        }

        .right {
            @apply col-span-9;
            @apply grid md:grid-cols-2 gap-8;

            .card-contact .picture-image {
                @apply rounded-full;
            }

            a {
                .text:first-letter {
                    text-transform: lowercase !important;
                }
            }
        }
    }

    h2.heading {
        @apply text-red;
    }

    .mol-breadcrumbs {
        @apply mb-8 relative;

        &::before {
            content: url(/assets/img/triangle-small.svg);
            @apply absolute lg:hidden -top-4 right-8 w-[33px] h-[33px] z-10;
        }
    }

    .wiw-name-function {
        @apply relative;

        &::before {
            content: url(/assets/img/triangle-big.svg);
            @apply absolute hidden lg:block -top-14 right-36 w-[66px] h-[66px] z-10 rotate-[-42deg];
        }

        .picture {
            @apply hidden lg:block absolute top-0 right-0 w-[140px] h-[140px];
            .picture-image {
                @apply rounded-full;
                @apply object-cover w-full h-full block min-w-[140px];
            }
        }

        h1.heading {
            @apply w-3/4;
        }

        h2.heading {
            @apply text-black w-3/4;
        }
    }

    .wiw-mandates,
    .wiw-functions,
    .wiw-memberof,
    .wiw-aboutme,
    .wiw-research {
        @apply border-t border-solid border-gray py-6;
    }

    .wiw-mandates {
        ul {
            @apply flex flex-col;
            li {
                @apply lg:flex lg:flex-row lg:flex-wrap;

                a {
                    @apply lg:mr-8;
                }

                ul li a {
                    @apply lg:mr-8;

                    ul li a {
                        @apply lg:mr-8;
                    }
                }
            }
        }
    }

    .wiw-functions,
    .wiw-memberof {
        li {
            @apply flex flex-col md:flex-row;
        }
    }

    .load-more-content {
        .paragraph-intro {
            @apply mb-6;
        }

        .more {
            @apply relative;

            .more-overlay {
                @apply w-full h-12 bg-white opacity-90 absolute bottom-0 left-0;
            }
        }

        &.active {
            .more {
                .more-overlay {
                    @apply hidden;
                }
            }
        }

        .links {
            @apply flex flex-row justify-between;
        }
    }

    .wiw-research {
        .row {
            @apply flex flex-col mb-4;

            @screen md {
                display: grid;
                grid-columns: 2;
                grid-template-columns: 0.3fr 1fr;
            }
        }
    }

    .wiw-research-affiliates {
        @apply mb-8;
        h3.heading {
            @apply text-red;
        }
    }

    .wiw-supervised-phds {
        @apply mb-8;
        h3.heading {
            @apply text-red;
        }
        .link {
            @apply mt-2;
        }
    }

    .wiw-other-research-activities {
        @apply mb-8;
        h3.heading {
            @apply text-red;
        }
        h4.heading {
            @apply font-semibold m-4;
        }
    }

    .wiw-publications {
        @apply mb-8 pt-6 border-t border-solid border-black;
        .wrap-tag {
            @apply flex justify-between gap-4 mb-4;
        }
        h2.heading {
            @apply text-red mb-0;
        }
        .link {
            @apply mt-2;
        }
    }

    .wiw-projects {
        @apply mb-8 pt-6 border-t border-solid border-black;
        .wrap-tag {
            @apply flex justify-between gap-4 mb-4;
        }
        h2.heading {
            @apply text-red mb-0;
        }
        .link {
            @apply mt-2;
        }
    }

    .wiw-innovation-knowledge {
        @apply mb-8 pt-6 border-t border-solid border-black;
        h2.heading,
        h3.heading {
            @apply text-red mb-0;
        }
        h3.heading {
            @apply mt-4 mb-2;
        }
    }

    .wiw-service-society {
        @apply mb-8 pt-6 border-t border-solid border-black;
        h2.heading {
            @apply text-red;
        }
        .link {
            @apply mt-2;
        }
    }

    .wiw-educations {
        @apply mb-8 pt-6 border-t border-solid border-black;
        h2.heading,
        h3.heading {
            @apply text-red mb-0;
        }
        h3.heading {
            @apply mt-4 mb-2;
        }
    }

    .wiw-spotlights {
        @apply mb-8 pt-6 border-t border-solid border-black;
        .link {
            @apply mt-2;
        }
    }
}