.onglets {
width: 100%;
justify-content: space-between;
align-items: flex-start;
flex-flow: wrap;
margin: 40px 0;
gap: 40px 2%;
}
.onglets__card {
position: relative;
width: 32%;
margin: unset;
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
background-color: #fff;
}
.onglets__card:last-child {
margin-right: 0;
}
.onglets__card img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.onglets__card figcaption {
width: calc(100% - 80px);
}
.onglets__title {
margin: 30px 0;
font-size: 24px;
font-weight: 700;
color: var(--red);
padding: unset;
border: unset;
line-height: normal;
text-transform: none;
}
.onglets__text {
position: absolute;
left: 40px;
bottom: 0;
width: calc(100% - 80px);
font-size: 19px;
font-weight: 400;
line-height: 140%;
padding-bottom: 60px;
pointer-events: none;
opacity: 0;
}
.onglets__toggle {
position: absolute;
z-index: 2;
bottom: 0;
right: 0;
width: 60px;
height: 56px;
cursor: pointer;
appearance: none;
border: unset;
padding: unset;
background-color: transparent;
clip-path: polygon(-10% 110%, 110% 110%, 110% -10%);
}
.onglets__toggle:focus {
outline: 4px dashed var(--red);
}
.onglets__toggle img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 1200px) {
.onglets__card {
width: 49%;
}
}
@media screen and (max-width: 800px) {
.onglets__card {
width: 100%;
}
.onglets__card figcaption {
width: calc(100% - 40px);
}
.onglets__text {
width: calc(100% - 40px);
left: 20px;
}
}