.post-teaser{
    position: relative;
    & .field--name-field-image{
        position: relative;
        & img{
            width: 100%;
            height: 100%;
            max-height: calc(50vh - 0.5rem);
            object-fit: cover;
            display: flex;
            min-height: 300px;
        }

        &::before, &::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(#00000000 50%, #000);
            opacity: 0.75;
            z-index: 1;
            transition: opacity .3s ease;
        }

        &::after{
            background-image: none;
            background-color: #000;
            opacity: 0.2;
        }

    }

    & .post__title{
        position: absolute;
        bottom: 0;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        color: #fff;
        gap: 1rem;
        z-index: 2;
        opacity: 0.75;

        & .post__date{
            font-size: var(--font-size-small);
            font-weight: 300;
        }
        
        & .field--name-title{
            font-size: 1.2rem;
            font-weight: bold;
            transform-origin: 0 0;
            transform: translateY(0) scale(0.8);
            transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
    }

    &:hover{
        & .field--name-field-image::before{
            opacity: 1;
        }

        & .field--name-field-image::after{
            opacity: 0;
        }

        & .post__title{
            opacity: 1;
        }

        & .field--name-title{
            transform: translateY(-0.5rem) scale(1);
        }
    }
}


.post__tags{
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1rem;
    font-weight: 600;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;   
}

.post__tag{
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    color: var(--color-main);
}


@media screen and (max-width: 767px) {
    .post-teaser {
        & .post__title {
            & .field--name-title {
                font-size: 1rem;
                transform: translateY(0) scale(0.9);
            }
        }

        &:hover{
            & .field--name-title {
                transform: translateY(-0.5rem) scale(1);
            }
        }
    }

    .post__tags{
        font-size: 0.8rem;
        font-weight: 400;
        top: 0.5rem;
        right: 0.5rem;
    }
}