Web-programming_Anisin_R.S..../styles/shirts-style.css

54 lines
1.0 KiB
CSS
Raw Permalink Normal View History

2024-01-10 20:41:47 +04:00
.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);
}