.archive-blg{
    /* background: url(../../assets/img/brandsbg1.png) repeat top left,url(../../assets/img/brandsbg2.png) repeat top left,var(--white);
    background-blend-mode: hard-light,normal; */

    background: url(../../assets/img/brandsbg1.png) repeat top left,url(../../assets/img/brandsbg2.png) repeat top left,var(--white);
    background-blend-mode: hard-light,normal;
    padding: 4.66rem 0 4rem;

}



.archive-blg .row{

    grid-gap: 2rem 0;

}



.archive-blg .row>*{

    padding: 0 10px;

}



.archive-blg .box .img{

    width: 100%;

    aspect-ratio: 1/.63157;

}



.archive-blg .box .img img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    -o-object-fit: cover;

    filter: grayscale(1);

    -webkit-filter: grayscale(1);

    -ms-filter: grayscale(1);

    transition: all .3s ease-in-out;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

}



.archive-blg .box:hover .img img{

    filter: grayscale(0);

    -webkit-filter: grayscale(0);

    -ms-filter: grayscale(0);

}



.archive-blg .box .bottom{

    position: relative;

    width: 73.68421%;

    background: var(--white);

    box-shadow: 0px 0px 24.3px 0px #0000000d;

    margin-top: -25.23659%;

}



.archive-blg .box .bottom .top{

    border-bottom: 1px solid var(--line);

    padding: 20px 2rem 14px 20px;

}



.archive-blg .box .bottom .title{

    color: #3C3C3B;

    font-size: 16px;

    font-weight: 700;

    line-height: 19px;

    letter-spacing: -0.24px;

    margin-bottom: 10px;

}



.archive-blg .box .bottom .text{

    display: -webkit-box;

    display: -moz-box;

    color: #AAADB6;

    font-size: 14px;

    font-weight: 300;

    line-height: 17px;

    letter-spacing: -0.21px;

    line-clamp: 3;

    -webkit-line-clamp: 3;

    -moz-line-clamp: 3;

    box-orient: vertical;

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    overflow: hidden;

}



.archive-blg .box .bottom .sm{

    display: flex;

    display: -webkit-flex;

    align-items: center;

    grid-gap: 0;

    color: #AAADB6;

    font-weight: 700;

    letter-spacing: 0.024px;

    padding: 12px 23px;

    transition: all .3s ease-in-out;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

}



.archive-blg .box .bottom .sm::after{

    content: url('data:image/svg+xml;utf8,<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L8 4.50342L0 9V4.50342V0Z" fill="rgb(236,28,36)"/></svg>');

    width: 0;

    overflow: hidden;

    transition: all .3s ease-in-out;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

}



.archive-blg .box:hover .bottom .sm{

    grid-gap: 1rem;

    color: var(--red);

}



.archive-blg .box:hover .bottom .sm::after{

    width: 7px;

}



@media(max-width:992px){

    .archive-blg{

        padding: 2rem 0;

    }

}



@media(max-width:575px){

    .archive-blg .box .bottom{

        width: 100%;

        margin-top: 0;

    }

}