.tpl-study-detail {
    @apply lg:bg-gray-300;
    @apply lg:py-12;
    @apply relative;

    &:before {
        content: url(/assets/img/triangle-big.svg);
        @apply hidden lg:block;
        @apply absolute;
        @apply top-16;
        @apply z-30;
        right: 20%;
        width: 66px;
        height: 66px;
    }

    .has-sidenav {
        @apply relative;
        @apply z-20;

        &:after {
            content: url(/assets/img/square-dots.svg);
            @apply hidden lg:block;
            @apply absolute;
            @apply top-32 -right-16;
            @apply z-10;
            width: 157px;
            height: 131px;
        }
    }

    h3.heading,
    .heading.h3 {
        @apply font-semibold;
    }

    .mol-breadcrumbs {
        @apply mb-9;
    }

    .study-image {
        picture {
            @apply w-full mt-0;
            height: 480px;

            img {
                @apply object-cover w-full h-full;
            }
        }
    }
}

.dt-studydetail {
    .nav-desktop-mobile {
        @apply relative;

        &::before {
            content: url(/assets/img/triangle-small.svg);
            @apply absolute lg:hidden;
            @apply -bottom-0 right-8;
            width: 33px;
            height: 33px;
            z-index: 10;
        }
    }

    .joint-wrapper {
        @apply flex flex-col md:flex-row justify-between items-center md:text-right;
        padding: 0 1.5rem 1rem 1rem;

        .paragraph {
            @apply pt-4 pr-8 font-bold;
        }

        picture {
            @apply md:w-1/2;
        }
    }
}