.imv-collection-grid{
    --imv-columns:4;
    --imv-outer-inset:30px;
    display:grid;
    grid-template-columns:repeat(var(--imv-columns), minmax(0,1fr));
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

.imv-collection-card{
    --imv-separator:#DCCFB7;
    --imv-marker:#B67B21;
    --imv-duration:550ms;
    position:relative;
    min-width:0;
    text-align:center;
    box-sizing:border-box;
    border-bottom:1px dashed var(--imv-separator);
}

.imv-collection-card:not(:last-child)::after{
    content:"";
    position:absolute;
    top:14%;
    right:0;
    bottom:0;
    width:1px;
    border-right:1px dashed var(--imv-separator);
    pointer-events:none;
}

.imv-collection-card:not(:last-child)::before{
    content:"";
    position:absolute;
    z-index:5;
    right:-6px;
    bottom:-1px;
    width:12px;
    height:7px;
    background:var(--imv-marker);
    border-radius:12px 12px 0 0;
    pointer-events:none;
}

.imv-collection-card-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    height:100%;
    margin-inline:auto;
    box-sizing:border-box;
}

/*
 * Desktop alignment from the reference:
 * card 1 shifts left, cards 2/3 stay centered, card 4 shifts right.
 * Separators and bottom markers do not move.
 */
.imv-collection-card:first-child:not(:last-child) .imv-collection-card-inner{
    transform:translateX(calc(-1 * var(--imv-outer-inset)));
}

.imv-collection-card:last-child:not(:first-child) .imv-collection-card-inner{
    transform:translateX(var(--imv-outer-inset));
}

.imv-collection-image-wrap{
    --imv-image-height:132px;
    --imv-hover-scale:1.38;
    position:relative;
    z-index:2;
    flex:0 0 auto;
    height:var(--imv-image-height);
    overflow:hidden;
    transform:translateZ(0) scale(1);
    transform-origin:center bottom;
    transition:transform var(--imv-duration) cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.imv-collection-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:none;
}

.imv-collection-card:hover .imv-collection-image-wrap{
    z-index:10;
    transform:translateZ(0) scale(var(--imv-hover-scale));
}

.imv-collection-title{
    margin:15px 0 0;
    font-size:13px;
    line-height:1.35;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0;
    transition:color .3s ease;
}

.imv-collection-description{
    margin-top:17px;
    font-size:13px;
    line-height:1.45;
    max-width:230px;
}

.imv-collection-button-wrap{
    margin-top:auto;
    padding-top:18px;
}

.imv-collection-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    font-size:11px;
    line-height:1;
    font-weight:600;
    transition:background-color .3s ease,color .3s ease,transform .3s ease;
}

.imv-collection-button:hover{
    transform:translateY(-2px);
}

@media (max-width:1024px){
    .imv-collection-grid{ --imv-outer-inset:0px; }

    .imv-collection-card:nth-child(2n)::after,
    .imv-collection-card:nth-child(2n)::before{
        display:none;
    }
}

@media (max-width:767px){
    .imv-collection-grid{
        overflow:visible;
    }

    .imv-collection-card::after,
    .imv-collection-card::before{
        display:none !important;
    }

    .imv-collection-card{
        border-bottom:1px dashed var(--imv-separator);
    }

    .imv-collection-image-wrap{
        width:min(170px,70vw) !important;
    }
}

@media (hover:none){
    .imv-collection-card:active .imv-collection-image-wrap{
        transform:translateZ(0) scale(var(--imv-hover-scale));
    }
}