.product-list__container {
margin: 0;
padding: 0;
}
.product-list__card-layout {
width: 100%;
margin: 0;
padding: 0;
}
.product-item {
width: 23%;
display: inline-block;
vertical-align: top;
white-space: normal;
box-sizing: border-box;
padding: .5rem 0 1rem 0;
margin-bottom: 3%;
position: relative;
float: left;
margin-right: 0.95%;
margin-left: 0.98%;
}
@media (max-width: 992px) {
.product-item {
width: 30%;
margin-right: 1.65%;
margin-left: 1.68%;
}
}
@media (max-width: 768px) {
.product-item {
width: 48%;
margin-left: 1%;
margin-right: 1%;
}
}
@media (max-width: 576px) {
.product-item {
width: 98%;
}
}
.product-item__card {
display: block;
position: relative;
box-shadow: 0 1.75rem 1.875rem rgba(154, 156, 165, 0.08), 0 1.25rem 1rem rgba(154, 156, 165, 0.05), 0 0.5rem 0.625rem rgba(154, 156, 165, 0.04), 0 0.25rem 0.25rem rgba(30, 33, 44, 0.03);
text-decoration: none;
transition: box-shadow .25s ease-in-out;
overflow: hidden;
height: 17rem;
background-color: rgba(144,191,33, 0.05);
background: linear-gradient(0deg, rgba(144,191,33,0.2) 0%, rgba(144,191,33,0.05) 35%, rgba(255,255,255,1) 100%);
}
.product-item__card__img {
position: relative;
border-radius: .25rem;
overflow: hidden;
z-index: 1;
display: block; 
height: 12rem;
width: 100%;
display: flex;
align-items: center;
}
.product-item__card__img .bg-circle {
border-radius: 50% 50% 10% 50%;
height: 6rem;
width: 6rem;
display: flex;
margin: auto;
background: rgba(144,191,33, 0.25);
align-items: center;
}
.product-item__card__img .wp-block__image-background {
transform: scale(1.05);
width:100%;
height:auto;
z-index:0;
}
.product-item__card__img .default-image {
display:none;
}
.product-item__card__body {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 1rem;
background-color: #fff;
text-align: center;
-webkit-transform: translateY( 74% );
transform: translateY( 74% );
transition: -webkit-transform .25s ease-in-out;
transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
will-change: transform;
padding: 1rem 1.25rem;
z-index: 2;
}
.product-item__card__body__title {
position: relative;
text-decoration: none !important;
height: 5.2rem;
overflow: hidden;
margin-bottom: 1rem;
margin-top: 16px !important;
align-items: center;
font-family: 'lina-bold', Arial, sans-serif;
color: #90bf21;
font-size: 1.5rem !important;
font-weight:100;
}
.product-item__card__body__excerpt {
color: #505050;
padding: 0rem 0rem 0rem;
height: 6.8rem;
overflow: hidden;
margin-bottom: 1.5rem;
}
.product-item__card__body a {
text-decoration: none !important;
}
.product-item__card__body .cta-button {
font-family: 'lina-bold', Arial, sans-serif;
background-color: $lina-magenta;
color: $lina-magenta;
padding: 0;
display: inline-block;
border-radius: 0rem;
text-transform: none;
font-size: 0.98rem;
font-weight: 600;
animation: text-color-change 25s infinite;
margin: 0.25rem 0 1.5rem;
transform: scale(1);
transition: all 0.8s;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,0);
}
.product-item__card__body .cta-button .inner-block {
display: inline-block;
margin: 2px;
background-color: #ffffff;
padding: 0.65rem 1.25rem;
transition: background-color 0.5s;
}
.product-item__card__body .cta-button:hover {
text-decoration: none;
cursor: pointer;
color: rgba($lina-magenta, 0.8);
transform: scale(1.05);
box-shadow: 0px 12px 10px -10px rgba(0,0,0,0.2);
}
.product-item__card:hover {
cursor: pointer;
transform: scale(1.02);
transition: transform .5s ease-in-out;
box-shadow: 0 1.75rem 1.875rem rgba(144,191,33, 0.08), 0 1.25rem 1rem rgba(144,191,33, 0.05), 0 0.5rem 0.625rem rgba(144,191,33, 0.04), 0 0.25rem 0.25rem rgba(144,191,33, 0.03);
}      
.product-item__card:hover > .bg-circle {
transform: scale(0.9);
transition: scale .25s ease-in-out;
}
.product-item__card:hover > .product-item__card__body {
transform: translateY(0rem);
background-color: rgba(255,255,255, 0.95);
transition: transform .25s ease-in-out background-color .25s ease-in-out;
}
.product-item__plain {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
height: 16rem;
}
.product-item__plain a {
text-decoration: none !important;
}
.product-item__plain__header {
display: flex;
align-items: center;
margin-bottom:1.05rem;
}
.product-item__plain__header__icon {
flex: 24%;
margin-left:0.5rem;
}
.product-item__plain__header__icon .wp-block__image-background {
transform: scale(1.05);
width:70%;
height:auto;
z-index:0;
}
.product-item__plain__header__title {
flex: 75%; 
}
.product-item__plain__header__title h4 {
position: relative;
text-decoration: none !important;
overflow: hidden;
font-family: 'lina-bold', Arial, sans-serif;
color: $lina-gray-dark;
font-size: 1.25rem !important;
font-weight:500;
overflow: visible;
}
.product-item__plain__header__title h4 .header__title {
position: relative;
display: block;
z-index:2;
}
.product-item__plain__header__title h4 .header__underline {
height: 1.25rem;
width: 0%;
background-color: rgba($lina-green, 0.2);
position:absolute;
top:0.55rem;
left: -0.5rem;
z-index:1;
}
.product-item__plain__desc p {
padding-bottom: 0px !important;
}
.product-item__plain__desc .product-desc {
color: $lina-gray-dark;
padding: 0rem 0rem 0rem;
height: 5.6rem;
overflow: hidden;
margin-bottom: 1.5rem;
}
.product-item__plain__desc .cta_link {}
.product-item__plain__desc .cta_link .cta_link__title {
font-family: 'lina-bold', Arial, sans-serif;
font-weight: 500;
color: $lina-gray-dark;
padding: 0 0 0 0;
margin: 0 0 0 0;
z-index: 2;
position: relative;
display: flex;
align-items: center;
}
.product-item__plain__desc .cta_link .cta_link__title::after {
content: url(//www.lina.de/wp-content/themes/lina/assets/img/icons/chevron-right-solid-gray.svg);
display: block;
width: 20px;
height: 20px;
margin-left: 1.25rem;
margin-top: -0.3rem;
color: $white;
transform: scale(0.5);
animation: lina-shake 5s infinite;
}
.product-item__plain:hover {
cursor: pointer;
transform: scale(1.06);
transition: transform .5s ease-in-out;
}
.product-item__plain:hover > .header__underline {
width: 80%;
transition: width 1s ease-in-out;
}
.product-item__plain:hover > .cta_link__title {
color: $lina-orange;
transition: color 1s ease-in-out;
}