.tpl-vacancy-overview-vacancies {
    .vacancy-overview-list {
        @apply grid mt-10 mb-20;
        @apply md:grid-cols-12;
        @apply lg:mt-20;

        .left {
            @apply mr-12;
            @apply col-span-3;

            .modal {
                @apply hidden md:block fixed top-0 left-0 overflow-y-auto h-full z-[9999999] md:z-50 w-full md:w-auto bg-white md:relative;
                @apply md:h-auto md:relative md:block md:w-auto;

                &::-webkit-scrollbar {
                    width: 1px;
                }

                .modal-inner {
                    @apply p-6 mt-32 mb-32;
                    @apply md:p-0 md:m-0 md:pl-1;
                }

                &.active {
                    @apply block;
                }

                .desktop-form {
                    @apply hidden;
                    @apply md:block;
                }

                .mobile-form {
                    @apply md:hidden;
                }

                .atm-button {
                    @apply m-0;
                }

                .wrapper-checkbox {
                    @apply mb-8;

                    .atm-form-checkbox {
                        @apply mb-1;
                    }

                    .wide {
                        @apply rounded-full border-gray-100 border-solid border-2 relative overflow-hidden;

                        input {
                            @apply hidden;
                        }

                        label {
                            @apply py-3 px-5 w-full cursor-pointer flex justify-between items-center content-center;
                        }

                        input:disabled + * {
                            @apply cursor-default;
                        }

                        input:checked + * {
                            @apply text-primary bg-[#EEE9F3] border-none;

                            &::after {
                                font-family: 'Font Awesome 6 Pro';
                                content: '\f00c';
                                @apply text-h5;
                            }
                        }
                    }

                    .last-item ~ .atm-form-checkbox {
                        @apply hidden;
                    }

                    .read-more,
                    .read-less {
                        @apply text-secondary-col-1 cursor-pointer;

                        &.hide {
                            @apply hidden;
                        }
                    }
                }

                .filter-container {
                    @apply flex flex-col gap-4 font-display mb-8;

                    h4,
                    p {
                        @apply mb-0;
                    }

                    .atm-form-input {
                        @apply relative w-full font-display;

                        .form-input {
                            @apply w-full border-0 p-0 rounded-full bg-[#F5F5F5] px-5 py-4;
                        }

                        .form-label {
                            @apply p-0 w-max;
                        }
                    }

                    .atm-button {
                        @apply hidden md:inline-block w-full xl:w-max;
                    }
                }
            }

            .go-back {
                @apply fixed w-full z-50 top-0 left-0 border-b border-solid bg-secondary-col-1;
                @apply md:hidden;

                .go-back-inner {
                    @apply py-6 px-4 flex justify-between items-center text-white;

                    * {
                        @apply cursor-pointer;
                    }
                }
            }

            .mobile-filter-btn {
                @apply border-solid text-center;
                @apply md:hidden;

                .atm-button {
                    @apply m-0;
                }
            }

            .check-postcode {
                @apply mb-8;

                .check-postcode-wrapper {
                    @apply flex mb-4;
                }

                .atm-form-select {
                    .form-select {
                        @apply w-full;
                    }
                }

                .atm-form-input {
                    @apply relative w-full;

                    .form-input {
                        @apply w-full border-0 border-b p-0 rounded-none;
                    }

                    .form-label {
                        @apply text-gray-300 p-0 w-[max-content] left-0;
                    }
                }
                .atm-button {
                    @apply bg-white m-0 p-0 rounded-none border-b;

                    .button-content {
                        height: 100%;
                    }

                    .atm-icon {
                        @apply text-black;

                        &::after {
                            content: none;
                        }
                    }
                }
            }

            .show-vacancies {
                @apply fixed bottom-0 left-0 bg-white p-6 w-full z-[999] text-center;
                @apply md:hidden;
                -webkit-box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
                -moz-box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
                box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
            }
        }

        .right {
            @apply relative px-3 self-start grid gap-4;
            @apply col-span-9 md:px-10;

            svg {
                @apply top-0 left-0;
            }

            .mobile-filter-btn {
                @apply border-solid text-end mb-4;
                @apply md:hidden;

                .atm-button {
                    @apply m-0;
                }
            }

            .vacancy-results {
                @apply grid justify-between items-center p-4;
                @apply md:mb-10 md:p-0;

                grid-template-columns: 1fr 1fr;

                .desktop-filer-btn,
                .mobile-filter-btn {
                    grid-area: 1 / 2 / 1 / 3;
                }

                .desktop-filter-btn {
                    @apply hidden justify-self-end;
                    @apply md:block;
                }
                .mobile-filter-btn {
                    @apply justify-self-end;
                    @apply md:hidden;
                }

                .atm-heading {
                    @apply m-0 text-white;
                }
                .atm-button {
                    @apply m-0;
                }
            }

            .vacancy-list-wrapper {
                @apply grid gap-3 grid-cols-1;
                @apply md:gap-4;

                .no-vacancies {
                    @apply text-center;
                }
            }

            .atm-pager {
                @apply mt-16;
            }
        }
    }

    .vacancy-list-wrapper {
        /* #vacancy-list {
            @apply grid gap-6;
            display: grid;
            grid-template-rows: masonry;
        } */

        #vacancy-list {
            @apply grid gap-6 grid-cols-1 md:grid-cols-2;
        }

        /* 1e en 2e item → hoog */
        #vacancy-list > :nth-child(-n + 2) {
        }

        /* 3e en 4e item → middel */
        #vacancy-list > :nth-child(n + 3):nth-child(-n + 4) {
        }

        /* Vanaf 5e item → volbreed, onder elkaar */
        #vacancy-list > :nth-child(n + 5) {
            grid-column: 1 / -1;
        }

        .mol-vacancy-highlight {
            @apply rounded-3xl;

            .atm-heading {
                hyphens: auto;
            }

            .atm-badge {
                @apply bg-[#EEE9F3] text-primary rounded-full;
            }

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

        .vacancy-item-full{
            .vacancy-highlight-content {
                @apply flex flex-col justify-between;

                .atm-heading {
                    @apply mb-9;
                }
            }
        }

        .vacancy-item-mid {
            .vacancy-highlight-content {
                @apply flex flex-col justify-between;
            }
        }

        .vacancy-item-wide {
            .vacancy-highlight-content {
                @apply flex xl:flex-row flex-col xl:items-center justify-between;
            }

            .vacancy-highlight-bottom {
                @apply xl:ml-10 flex flex-wrap justify-between;
                
                .atm-link {
                    @apply xl:hidden block;
                }
            }
        }

        .vacancy-highlight-bottom {
            @apply flex flex-wrap justify-between gap-4;
        }

        .vacancy-highlight-content {
            @apply h-full;
        }

        .vacancy-content-block {
            @apply relative;

            .vacancy-highlight-content {
                @apply w-full p-6 md:p-10;

                @apply flex text-center flex-col items-center text-white font-display;

                .atm-heading {
                    @apply text-h2 md:text-h1 text-white;
                }

                .atm-paragraph {
                    @apply max-w-md;
                }
            }
        }
    }
}