* {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
font-family
:
sans-serif
;
}
body {
background
:
#e3e3e3
;
}
.container {
width
:
100%
;
min-height
:
100
vh;
padding
:
20px
;
display
: flex;
align-items:
center
;
justify-
content
: space-between;
flex-wrap: wrap;
gap:
20px
;
}
del {
color
:
red
;
}
.product-wrapper {
width
: calc(
25%
-
20px
);
background
:
white
;
overflow
:
hidden
;
border-radius:
10px
10px
10px
10px
;
transform: scale(
0.95
);
}
.product {
width
:
100%
;
background
:
#e8c8fb
;
}
.product .img {
height
:
80%
;
width
:
100%
;
}
.product .img img {
height
:
100%
;
width
:
100%
;
transition:
all
0.5
s;
object-fit: contain;
}
.product .info {
width
:
100%
;
height
:
20%
;
transition: transform
0.5
s;
display
: flex;
}
.info .details {
height
:
100%
;
width
:
65%
;
padding
:
20px
;
}
h
1
{
font-size
:
15px
;
}
.buy-btn {
display
: flex;
justify-
content
:
center
;
align-items:
center
;
width
:
35%
;
}
.buy-btn button {
cursor
:
pointer
;
padding
:
10px
20px
;
border
:
1px
solid
#3d0686
;
background
:
#5f00dd
;
color
:
#fff
;
box-shadow:
0
19px
38px
rgba(
0
,
0
,
0
,
0.30
),
0
15px
12px
rgba(
0
,
0
,
0
,
0.22
);
border-radius:
25px
;
}
@media
screen
and (
max-width
:
1200px
) {
.product-wrapper {
width
: calc(
33.33%
-
20px
);
}
.container {
align-
content
: start;
}
}
@media
screen
and (
max-width
:
950px
) {
.product-wrapper {
width
: calc(
50%
-
20px
);
}
}
@media
screen
and (
max-width
:
600px
) {
.product-wrapper {
width
:
100%
;
}
}
@media
screen
and (
max-width
:
350px
) {
.product-wrapper {
height
:
auto
;
}
.info .details {
width
:
100%
;
}
.info {
flex-
direction
: column;
}
.buy-btn {
width
:
100%
;
padding-bottom
:
10px
;
}
}