Spaces:
Running
Running
File size: 1,668 Bytes
c9ba648 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/*=============== FEATURED ===============*/
.featured{
&__card{
position: relative;
text-align: center;
background-color: var(--container-color);
padding: 2rem;
overflow: hidden;
border: 2px solid var(--border-color);
transition: border .4s, background-color .4s;
}
&__img{
width: 150px;
margin: 0 auto .75rem;
}
&__title{
font-size: var(--h2-font-size);
margin-bottom: .5rem;
}
&__prices{
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
margin-bottom: 1.25rem;
}
&__discount{
color: var(--title-color);
}
&__price{
font-size: var(--small-font-size);
text-decoration: line-through;
}
&__card .button{
cursor: pointer;
}
&__actions{
display: inline-flex;
flex-direction: column;
row-gap: .75rem;
position: absolute;
top: 2rem;
right: -1.5rem;
transition: right .4s;
& button{
background: none;
font-size: 1.25rem;
color: var(--first-color);
cursor: pointer;
}
}
&__card:hover &__actions{
right: 1.5rem;
}
}
/* Swiper class */
.swiper-button-prev::after,
.swiper-button-next::after{
content: '';
}
.swiper-button-prev,
.swiper-button-next{
width: initial;
height: initial;
background-color: var(--container-color);
border: 2px solid var(--border-color);
padding: .5rem;
font-size: 1.5rem;
color: var(--first-color);
transition: border .4s, background-color .4s;
} |