.mockupsContainer{
    width: 100%;
    columns: 174px 4;
    column-gap: 1vw;
    padding:0 1vw 20px;
    overflow-x: hidden;
}
.mockupBox{
    display: flex;
    background: var(--color2);
    margin-bottom: 1vw;
    break-inside: avoid;
    position: relative;
    border-radius: 6px;
    transition: all 200ms ease;
    flex-direction: column;
    text-decoration: none;
}
.mockupBox:hover{
    /*background: var(--color1);*/
    cursor: pointer;
}
.mockupBox .mockupImgBox{
    width: 100%;
    border-bottom: 2px solid var(--colorBg);
}
.mockupBox .mockupImgBox img{
    width: 100%;
    height: auto;
    transition: all 300ms ease;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.0));
}
.mockupBox:hover .mockupImgBox img{
    filter: drop-shadow(-3px 14px 5px rgba(0, 0, 0, 0.15));
    transform: scale(1.1);
}
.mockupBox h2{
    display: flex;
    color: var(--txt2);
    font-size: 15px;
    justify-content: center;
    text-align: center;
    width: 100%;
    font-weight: normal;
    padding: 6px;
    text-transform: capitalize;
}
.animation_icon{
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,.1);
    padding: 5px;
    width: 24px;
    height: 24px;
    border-radius: 2px;
}
.animation_icon img{
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(66%) sepia(2%) saturate(1100%) hue-rotate(176deg) brightness(93%) contrast(89%);
}