Vacatures

				
					/********************/
/***  VACATURES  ****/
/********************/

.vacatures {

    .vacature {
        margin-bottom: var(--spacing-m);

        &__time {
            color: var(--color-secondary);
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: .05rem;
            margin-bottom: var(--spacing-xs);
        }
        
        &__title {
            color: var(--color-primary);
        }
        
        &__text {
            margin-bottom: var(--spacing-s);
        }
        
        &__locatie {
            font-weight: 600;
            margin-bottom: var(--spacing-xs);
        }
        
        &__salaris, 
        
        &__condition {
            display: inline-block;
            align-items: center;
            color: var(--color-primary);
            font-weight: 600;
            font-size: 14px;
            padding: 2px 6px 2px 6px;
            border-radius: 4px;
            overflow: hidden;
            margin: 0 6px 4px 0;
            position: relative;
            z-index: 1;
            
            &:before {
                content: '';
                position: absolute;
                display: block;
                inset: 0;
                background: var(--color-primary);
                opacity: .2;
            }
            
            span {
                display: inline-block;
                transform: translateY(.15em);
            }
            
        }

        &--card {
            border: 2px solid var(--color-primary);
            border-radius: var(--border-radius-xl);
            padding: var(--spacing-m);
            display: flex;
            flex-direction: column;
            
            .btn {
                margin-top: auto;
                margin-right: auto;
                color: white;
            }
        }
        
        &--row {
            border: 2px solid var(--color-primary);
            border-radius: var(--border-radius-xl);
            padding: var(--spacing-m);
            display: flex;
            flex-direction: column;
            gap: 24px;
            
            @include breakpoint(large) {
                flex-direction: row;
            }
            
            .vacature__body {
                flex: 1 1 70%;
            }
            
            .vacature__info {
                border-radius: 8px;
                overflow: hidden;
                flex: 1 1 30%;
                position: relative;
                z-index: 1;
                padding: var(--spacing-s);
                
                &:before {
                    content: '';
                    position: absolute;
                    display: block;
                    inset: 0;
                    background: var(--color-primary);
                    opacity: .2;
                }
            }
            
            .vacature__condition {
                
                &:before {
                    background: white;
                    opacity: 1;
                }
                
            }
            
            .btn {
                margin-top: auto;
                margin-right: auto;
                color: white;
            }
        }
    }
}