/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/components/ProductCard/styles.scss
@import "styles/_mixins.scss";
.product-card {
flex: 1 1;
padding: 24px;
border-radius: 8px;
background-color: var(--White);
display: flex;
flex-direction: column;
transition: 0.5s box-shadow;
&:hover {
box-shadow: 0px 16px 48px -16px rgba(59, 44, 177, 0.16);
.button {
opacity: 0.8;
span {
transform: translateX(24px);
}
.arrow {
&:first-child {
opacity: 1;
transform: translateX(0px);
}
&:last-child {
opacity: 0;
transform: translateX(24px);
}
}
}
}
@include w(1257) {
flex: 0 1 calc(50% - 10px);
}
@include w(910) {
flex: 0 1 100%;
}
&__icon {
height: 72px;
width: 72px;
padding: 16px;
background-color: var(--Light-Grey);
img {
height: 40px;
width: 40px;
}
}
.body2 {
opacity: 0.6;
}
&__info {
margin: 24px 0;
&-title {
margin-bottom: 16px;
}
}
&__text-container {
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
&__body {
margin-top: auto;
display: flex;
flex-direction: column;
}
&__body-2 {
margin-top: auto;
display: flex;
flex-direction: column;
}
&__price-container {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 10px 10px 16px;
border-radius: 4px;
gap: 20px;
background-color: var(--Light-Grey);
.body3 {
display: flex;
flex-wrap: nowrap;
display: inline;
opacity: 0.5;
}
.button-text {
display: inline-block;
margin: 0 8px;
line-height: 140%;
}
.label {
margin-left: auto;
}
@include w(1315) {
min-height: 58px;
}
@include w(1257) {
min-height: auto;
}
}
ul {
margin: 32px 0;
li {
.list-icon {
height: 24px;
width: 24px;
}
display: flex;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid var(--Light-Grey);
&:first-child {
padding: 0 0 12px;
}
&:last-child {
padding: 12px 0 0;
border-bottom: none;
}
}
}
.button {
margin-top: auto;
justify-content: center;
width: 100%;
}
}