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

    .vacancy-container {
        @apply gap-8;
        @apply lg:grid lg:grid-cols-12;

        p:empty {
            min-height: 0 !important;
        }

        h3 {
            @apply text-h1 block font-display font-medium mt-6 mb-6 text-secondary-col-1;
        }

        .left {
            @apply col-span-6 order-1;

            .atm-heading {
                @apply text-secondary-col-1;
            }

            .atm-paragraph {
                @apply mb-10;

                ul {
                    @apply list-none p-0;
                }

                span {
                    @apply font-body text-md !important;
                }
            }

            .mol-image-slider {
                @apply mb-12;
            }

            .atm-button {
                @apply mb-12;
            }

            .vacancy-benefits {
                .atm-paragraph {
                    @apply mb-0;
                }
            }
        }

        .right {
            @apply col-span-4 order-2 col-end-13 flex flex-col gap-4;

            .org-salary-calculator-block .calculator-content {
                @apply flex-wrap;
            }
        }

        li {
            @apply relative pl-8;

            &::before {
                content: '\f00c';
                font-family: 'Font Awesome 6 Pro';
                font-weight: 900;
                @apply absolute left-0 text-primary;
            }
        }
    }
    .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:m-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;
                }
            }
        }
    }
}