.tpl-vacancy-page {
    @apply pt-[calc(var(--content-padding-top))] overflow-hidden;

    .atm-button {
        @apply mt-4;
    }

    .org-vacancy-intro-block {
        @apply mb-24;

        .org-vacancy-intro-block-container {
            @apply md:grid md:grid-cols-12 gap-8 items-center;

            .left {
                @apply md:col-span-6 mb-6 md:mb-0;

                .mol-specs-list {
                    @apply mb-6;
                }
            }
            .right {
                @apply md:col-start-7 md:col-end-13;

                .mol-intro-media {
                    @apply mt-0;

                    .intro-media-image {
                        @apply top-0 ml-0 mr-0;
                    }
                }
            }
        }
        .org-vacancy-intro-block-container-no-img {

            @apply md:grid items-center;

            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

            @screen md {
                grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
            }
            @screen lg {
                grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
            }
            @screen xl {
                grid-template-columns: 1fr minmax(0, 1fr) minmax(0, 1fr) 1fr;
            }
            @screen 2xl {
                grid-template-columns: 1.25fr minmax(0, 1fr) minmax(0, 1fr) 1.25fr;
            }

            .no-img {
                @apply mx-4 md:mx-0 sm:px-12;
                grid-area: auto / 2 / auto / 4;
            }
        }
    }

    .social {
        .mol-social-media {
            @apply flex flex-row mb-16;
        }
    }

    .vacancy-content-wrapper {
        @apply mb-24;
        @apply md:grid;

        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

        @screen md {
            grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
        }
        @screen lg {
            grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
        }
        @screen xl {
            grid-template-columns: 1fr minmax(0, 1fr) minmax(0, 1fr) 1fr;
        }
        @screen 2xl {
            grid-template-columns: 1.25fr minmax(0, 1fr) minmax(0, 1fr) 1.25fr;
        }
    }

    .content {
        @apply m-4;
        @apply sm:p-12;
        @apply md:m-0;
        grid-area: auto / 2 / auto / 4;

        .content-block {
            @apply mb-12;

            .vebego-container {
                @apply p-0 m-0;
            }
        }

        .vacancy-contact {
            @apply md:flex;
            @apply mb-10;

            .wrap-image {
                @apply relative py-8 pl-8;
                @apply mb-10;
                @apply md:mb-0;
                @apply md:mr-10;

                &::before {
                    content: '';
                    width: calc(100% - 2rem);
                    height: 100%;
                    @apply absolute left-0 top-0;
                    @apply bg-primary;
                    z-index: -1;
                    clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
                }
            }
        }

        .vacancy-apply {
            @apply lg:mt-36 text-center;

            .mol-title {
                @apply mb-8;
            }

            .mol-specs-list {
                @apply mb-8;
            }
        }
    }

    .vacancy-other {
        @apply py-16 px-4 relative;
        @apply grid;
        @apply gap-6;
        @apply justify-center;

        .atm-heading {
            @apply text-center text-white;
        }

        .org-vacancy-block {
            @apply max-w-3xl;

            @media (max-width: 640px) {
                @apply p-4 pr-8;
            }

            .atm-heading {
                @apply text-left text-black;
            }

            &:hover {
                .atm-heading {
                    @apply text-white;
                }
            }
        }
    }
}