.items-container{
    display: grid;
    gap: 1rem;
}

a.items-container, a.item-container:hover{
    color: inherit !important;
}

.item-bg-img{
    aspect-ratio: 1.527;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.item-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
}

.item-content h2{
    font-size: 1.5em;
    font-weight: 600;
}

.lg-view{
    display: none;
    pointer-events: none;
    user-select: none;
}

@media(min-width: 768px){
    .items-container{
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .item-container{
        position: relative;
        height: 100%;
        width: 100%;
        aspect-ratio: 1.527;
    }

    .item-wrapper{
        display:block;
        width: 100%;
        height: 100%;
    }

    .item-content{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 15;
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1.527;
        background-color: rgba(0, 0, 0, 0.0);
        transition: 300ms ease-in-out;
        margin-top: unset;
    }

    .item-container:hover .item-content{
        background-color: rgba(0, 0, 0, 0.9);
    }

    .item-content h2{
        --amount: 50px;
        opacity: 0;
        -moz-transform: translateY(var(--amount));
        -ms-transform: translateY(var(--amount));
        -webkit-transform: translateY(var(--amount));
        transform: translateY(var(--amount));
        transition: 300ms ease-in-out;
    }

    .item-container:hover .item-content h2{
        --amount: 0px;
        opacity: 1;
    }

    .item-content .item-tags{
        --amount: 50px;
        --transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1);
        opacity: 0;
        -moz-transform: translateY(var(--amount));
        -ms-transform: translateY(var(--amount));
        -webkit-transform: translateY(var(--amount));
        transform: translateY(var(--amount));
        -moz-transition: var(--transition);
        -o-transition: var(--transition);
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .item-container:hover .item-content .item-tags{
        transition-delay: 250ms;
    }

    .items-container:not(:hover) .item-content .item-tags{
        transition-delay: 0s;
    }

    .item-container:hover .item-content .item-tags{
        --amount: 0px;
        opacity: 1;
    }

    .item-bg-img{
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        min-height: 150px;
        object-fit: cover;
        object-position: center;
    }

    .sm-view{
        display: none;
        pointer-events: none;
        user-select: none;
    }

    .lg-view{
        display: initial;
        pointer-events: initial;
        user-select: initial;
    }
}