https://blog.cpsinvest.com/rss.xml
.articles-carousel {
text-align: center;
position: relative;
z-index: 1;
padding-top: 20px;
padding-bottom: 60px;
@media #{$desktop} {
padding-top: 50px;
}
&:after {
content: ”;
position: absolute;
bottom: -200px;
left: 0;
right: 0;
top: 0;
display: block;
z-index: -1;
background-color: $secondary-color;
}
.slick-arrow {
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
color: $brand-color;
position: absolute;
top: calc(50% – 25px);
&.slick-next {
right: -20px;
}
&.slick-prev {
left: -20px;
}
.icon {
height: 24px;
width: 14px;
}
}
}
.articles-carousel__top-arc {
position: absolute;
pointer-events: none;
bottom: calc(100% – 1px);
left: 0;
width: 100%;
z-index: 1;
}
.articles-carousel__heading {
margin-bottom: 85px;
@media #{$tablet} {
margin-bottom: 60px;
}
}
.articles-carousel__grid {
display: flex;
flex-wrap: wrap;
padding: 0 130px;
margin-bottom: 53px;
@media #{$desktop} {
padding: 0 50px;
}
@media screen and (max-width: 640px) {
padding: 0;
}
.slick-list {
width: 100% !important;
}
}
.articles-carousel__item {
//width: 33.33%;
}
.articles-carousel__inner {
max-width: 230px;
width: 100%;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
margin: 0 auto;
&:hover, &:focus {
.articles-carousel__image {
box-shadow: 0 3px 10px rgba($black, .2);
img {
transform: scale(1.2);
}
}
.articles-carousel__title {
color: $brand-color;
}
}
}
.articles-carousel__image {
border-radius: 100%;
height: 230px;
width: 230px;
overflow: hidden;
box-shadow: 0 3px 6px rgba($black, .16);
margin: 0 auto 25px;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
img {
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 1/1;
transition: all 300ms ease;
transform-origin: center center;
}
}
.articles-carousel__title {
@include fsz(16px);
line-height: 1.125;
max-width: 230px;
margin: 0 auto;
width: 100%;
color: $primary-color;
transition: color 300ms ease;
//text-transform: uppercase;
text-transform: unset;
}
.articles-carousel__button {
text-align: center;
}
.articles-carousel__link {