/home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass/utility/cards
Edit: /home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass/utility/cards/_team.scss (2920B)
.team-3-col {
display: grid;
grid-template-columns: 1fr;
grid-gap: 30px;
@media (min-width: 576px) {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 992px) {
grid-template-columns: 1fr 1fr 1fr;
}
}
.team-4-col {
display: grid;
grid-template-columns: 1fr;
grid-gap: 30px;
@media (min-width: 576px) {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 1200px) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.team-card {
position: relative;
&:hover &__social {
opacity: 1;
visibility: visible;
}
}
.team-card__image {
border-top-left-radius: 185px;
border-top-right-radius: 185px;
overflow: hidden;
> img {
width: 100%;
}
}
.team-card__social {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transition: 500ms ease;
a {
+ a {
margin-left: 10px;
}
@include socialIcon($bgColor: $thm-secondary, $color: #fff);
&:nth-child(2) {
transform: translateY(-50%);
@include reverseHover($bgColor: $thm-special, $color: #fff);
}
&:nth-child(3) {
transform: translateY(-50%);
@include reverseHover($bgColor: $thm-base, $color: #fff);
}
&:nth-child(4) {
@include reverseHover($bgColor: $thm-primary, $color: #fff);
}
}
}
.team-card__content {
background-color: $thm-secondary;
margin-left: 25px;
margin-right: 25px;
padding-top: 30px;
padding-bottom: 30px;
margin-top: -50px;
position: relative;
z-index: 10;
border-radius: $border-radius;
h3 {
margin: 0;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1;
margin-bottom: 6px;
}
p {
margin: 0;
line-height: 1;
font-size: 16px;
font-weight: 500;
color: #fff;
}
}
.content-bg-1 .team-card__content {
background-color: $thm-secondary;
}
.content-bg-2 .team-card__content {
background-color: $thm-base;
}
.content-bg-3 .team-card__content {
background-color: $thm-primary;
}
.content-bg-4 .team-card__content {
background-color: $thm-special;
}
.content-bg-5 .team-card__content {
background-color: #4bb2ed;
}
.content-bg-6 .team-card__content {
background-color: #c94bed;
}
.team-4-col {
.team-card__content {
margin-left: 15px;
margin-right: 15px;
margin-top: -20px;
}
}
.team-about {
background-repeat: no-repeat;
background-position: center center;
}
.team-about__top {
margin-bottom: 50px;
.block-title {
margin-bottom: 0;
}
&-text {
margin: 0;
font-size: 18px;
line-height: 34px;
font-weight: 500;
margin-top: 25px;
@media (min-width: 992px) {
padding-right: 40px;
margin-top: 0;
}
}
}