.mol-vacancy-highlight {
    @apply rounded-lg overflow-hidden border-gray-100 border-solid border-2;

    .vacancy-highlight-content {
        @apply p-8;
    }

    img {
        @apply transition duration-300;
    }

    &.overview-header-primary * {
        @apply text-white;
    }

    &.overview-header-secondary * {
        @apply text-black;
    }

    .vacancy-image-wrapper {
        @apply relative;

        .atm-badge {
            @apply absolute bottom-4 left-4;
        }
    }

    .mol-icon-badge .atm-icon {
        @apply mr-2;
    }

    .atm-image {
        @apply w-auto aspect-[16/9] md:aspect-[3/2];
        @apply overflow-hidden;

        img {
            @apply w-full;
            @apply h-full;
            object-fit: cover;
        }
    }
    &:hover {
        .atm-image {
            img {
                transform: scale(1.05);
            }
        }

        .atm-link {
            @apply no-underline;
        }

        .button-triangle {
            transform: translateY(-50%) scale(var(--scale));
        }
    }

    .atm-paragraph {
        @apply mb-5;
    }

    .vacancy-tags {
        @apply flex md:flex-col flex-wrap gap-3 gap-x-3 mb-8;

        .atm-icon {
            @apply text-lg w-5;
        }
    }

    .reading-time {
        .atm-icon {
            @apply mr-1;
        }

        .text {
            @apply text-sm;
        }
    }

    .relative-date {
        .date {
            @apply text-sm;
        }
    }

    &.img-left {
        @apply md:grid;
        @apply md:grid-cols-2;
        @apply md:gap-x-12;
    }

    .wrap-sdg {
        @apply flex;

        .atm-image {
            @apply w-16;
            @apply h-16;
            margin-right: 1px;
        }
    }

    .vacancy-highlight-bottom {
        @apply flex justify-between items-center;

        .atm-link {
            @apply text-black font-display text-md;
        }
    }

    &.image {
        @apply border-[#BBA6CD] border-4 bg-primary bg-opacity-5;

        .vacancy-image-wrapper {
            @apply relative overflow-hidden;

            .vacancy-overlay-link {
                @apply w-full h-full;
            }

            .vacancy-mask {
                @apply w-[150%] h-full ml-[-30%] mt-[-10%];

                image {
                    @apply w-full;
                }
            }
        }

        .vacancy-highlight-content {
            @apply p-8 lg:pt-4;
        }

        .atm-heading {
            @apply text-secondary-col-1 md:text-h2 text-h4;
            hyphens: auto;
        }

        .vacancy-tags {
            @apply mb-6;
        }

        .atm-paragraph {
            @apply mb-4 text-sm;
        }
    }
}