54 lines
1.0 KiB
CSS
54 lines
1.0 KiB
CSS
|
.product-grid{
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr 1fr;
|
||
|
|
grid-gap: 2vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-grid a, .product-grid div{
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1290px) {
|
||
|
|
.product-grid{
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
}
|
||
|
|
.product-grid a, .product-grid div{
|
||
|
|
width: 40vw;
|
||
|
|
height: 40vw;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 720px) {
|
||
|
|
.product-grid{
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
.product-grid a, .product-grid div{
|
||
|
|
width: 80vw;
|
||
|
|
height: 80vw;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.product-grid div{
|
||
|
|
position: absolute;
|
||
|
|
background-color: rgba(0, 0, 0, .3);
|
||
|
|
border: 1px solid rgba(0, 0, 0, 1);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-grid div:hover, .product-grid a:focus > div{
|
||
|
|
opacity: 1;
|
||
|
|
transition-property: opacity;
|
||
|
|
transition-duration: .4s;
|
||
|
|
transition-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-grid-container{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-grid{
|
||
|
|
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||
|
|
}
|