xshop/resources/theme/css/grid.css

#index-top .grid{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: auto;
    grid-gap: 10px 10px;
    padding-top: 1rem;
}

#index-top .grid > div{
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 2rem 1rem;
}
#index-top .grid > div:first-child{
    grid-column: 1/5 span;
    grid-row: 1/3;
    background: #273763 ;
}

#index-top .grid > div:nth-child(2){
    grid-column: 6/3 span ;
    grid-row: 1/2;
    background: rgb(255,125,51);
    background: linear-gradient(180deg, rgba(255,125,51,1) 0%, rgba(255,151,29,1) 100%);
}
#index-top .grid > div:nth-child(3){
    grid-column: 6/3  span;
    grid-row: 2/2;
    background: #504cff ;
}
#index-top .grid > div:nth-child(2),
#index-top .grid > div:nth-child(3){
    overflow: hidden;
}


#index-top .grid div img{
    height: 200px;
    margin-bottom: 1rem;
}
#index-top .grid div article{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items:center;
    width:100%;
}
#index-top .grid div article div{
    display: grid;
    width: 100%;
    text-align: center;
}

#index-top .grid div article div div{
    display: block;
    text-align: center;
}

#index-top .item{
    background: none;
}

#index-top .owl-item.active{
    background: none;
}

#index-top .badge{
    position: absolute;
    left: 0;
    top: 0;
    padding: 15px;
    border-radius: 13px 0;
    width: 75px;
    background: #283035aa !important;
}


/*-1024px width*/
@media ( max-width: 1024px ) {
    #index-top .grid {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-template-rows: repeat(1, 1fr) !important;
    }
    #index-top .grid > div{
        grid-column: auto !important;
        grid-row: auto !important;
    }
}


.da-thumbs {
    list-style: none;
    position: relative;
    margin: 20px auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    row-gap: .2rem;
}

.da-thumbs .item{
    padding: 0 !important;
}

/*-1000px width*/
@media ( max-width: 1200px ) {
    .da-thumbs{
        grid-template-columns: repeat(3,1fr);
    }
}
/*-600px width*/
@media ( max-width: 600px ) {
    .da-thumbs{
        grid-template-columns: repeat(2,1fr);
    }
}
/*-600px width*/
@media ( max-width: 500px ) {
    .da-thumbs{
        grid-template-columns: repeat(1,1fr);
    }
}

.da-thumbs li {
    margin: 10px;
    position: relative;
}

.da-thumbs li .price{
    position: absolute;
    left: -10px;
    top: 20px;
    text-align: center;
    font-size: 17px;
    z-index: 15;
    right: 20%;
    background: orangered;
    padding: 7px;
    box-shadow: 0px 1px 3px rgba(0,0,0,.7);
    color: white;
}
.da-thumbs li .price::before{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    left: 0px;
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid darkred;
}

/*.da-thumbs li .price::after{*/
/*    display: block;*/
/*    width: 6px;*/
/*    height: 44px;*/
/*    position: absolute;*/
/*    bottom: 3px;*/
/*    right: -0px;*/
/*    content: "";*/
/*    border: 1px solid rgba(0,0,0,.3);*/
/*    transform: skew(0deg,45deg);*/
/*    -ms-transform: skew(0deg,45deg); !* IE 9 *!*/
/*    -webkit-transform: skew(0deg,45deg); !* Safari and Chrome *!*/
/*    -o-transform: skew(0deg,45deg); !* Opera *!*/
/*    -moz-transform: skew(0deg,45deg); !* Firefox *!*/
/*    background: rgb(0, 80, 116);*/
/*}*/
.da-thumbs li .gird-item{
    padding-top: 100px;
}
.da-thumbs li > div{
    position: relative;
    height: 30vh;
    min-height: 250px;
    z-index: 1;
    transition: 900ms;
    padding-top: 3vh;
}
.da-thumbs li img{
    object-fit: cover;
    height: 30vh;
    min-height: 250px;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    transition: 300ms;
    width: 100%;

}

.da-thumbs li:hover > div{
    transform: rotateY(-180deg);
    box-shadow: 0 0 7px deepskyblue;

}
.da-thumbs li:hover img{
    opacity: .3;
    z-index: 0;
    filter: grayscale(1);
}


.fliped{
    text-align: center;
    transform: rotateY(180deg);
    height: 30vh;
}

.fliped h3{
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.list-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

@media ( max-width: 1200px ) {
    .list-grid{
        grid-template-columns: repeat(2,1fr);
    }
}
@media ( max-width: 540px ) {
    .list-grid{
        grid-template-columns: repeat(1,1fr);
    }
}
.list-grid img{
    width: 100%;
}

/*post list*/
@media (min-width: 768px) {
    .post-about {
        padding-right: 4ch;
        border-right: 1px solid lightgray;
        overflow: hidden;
    }

    .post-about:hover {
        transform: translateX(10px);
    }
}

@media (max-width: 768px) {
    .post-about {
        padding-bottom: 4ch;
        border-bottom: 1px solid lightgray;
    }

    .post-about:hover {
        transform: translateY(-10px);
    }
}

.post-about {
    transition: 300ms ease-in-out;
}

.post-tag {
    font-size: 12px;
    color: gray;
    text-transform: uppercase;
    padding:4px 15px;
    border-radius:0.4rem;
    border: 1px solid #2d69eb;
    color: #2d69eb;
    text-decoration: none;
}