.buy_variants {margin-right: -32px;}
.buy_variants .item {
    width: 460px;
    height: 256px; 
    border-radius: 12px;
    overflow: hidden;
    margin: 0 30px 30px 0;
    position: relative;
    transition: all 0.3s ease-out 0s;
    color: #FFF;
}

.buy_variants .item .img {width: 100%; height: 100%;}
.buy_variants .item .img img {display: block; width: 100%; height: 100%;}

.buy_variants .item .text {
    position: absolute;
    bottom: 0px;
    left: 0px;   
    font-size: 20px;
    background-color: transparent;
    padding: 16px 32px;
    z-index: 1;
    transition: height 0.5s ease-out 0s;
    
}
.buy_variants .item .text div {display: inline-block}
.buy_variants .item .text .anons {font-size: 16px; margin-top: 20px; line-height: 1.4; visibility: hidden; opacity: 0; height: 0; display: none;}
.buy_variants .item .text:after {
    background-color: rgba(75, 132, 175, 0.5);
    position: absolute; content: ""; 
    inset: 0px; border-top-right-radius: 12px; backdrop-filter: blur(32px); 
    pointer-events: none; z-index: -1; transition-timing-function: ease; 
    transition-duration: 0.3s; transition-property: background-color;
}
.buy_variants .item .text .name {white-space: nowrap;}

.buy_variants .item:hover .text {width: 100%!important; height: 100%!important; display: flex;}
.buy_variants .item:hover .text .anons {visibility: visible; opacity: 1; height: auto; display: block;}

.buy_variants .item .text a {color: #FFF; display: block; font-weight: 600;}


@media screen and (max-width: 1348px)
{

}


/*.col-xl-  (>= 1200px)*/
@media screen and (min-width: 1200px)
{
       
}
/*.col-lg-  (>= 992px)*/
@media screen and (max-width: 1200px)
{
     
}
/*.col-md-  (>= 768px)*/
@media screen and (max-width: 991px)
{
    
}
/*.col-sm-  (>= 576px)*/
@media screen and (max-width: 767px)
{
    .buy_variants .item .text {font-size: 16px;}    
}
/*.col-*/
@media screen and (max-width: 575px)
{
    
}