.card-how--vertical{object-fit:cover;border:1px solid var(--color-secondary);flex-direction:column;grid-template-rows:10% 200px auto;place-items:center;width:25%;display:grid;position:relative;overflow:hidden}.card-how--vertical :first-child{background:var(--color-secondary);color:#fff;grid-row:1/1;justify-content:center;align-items:center;min-width:100%;height:100%;font-size:1.25rem;font-weight:600;display:flex}.card-how--vertical img{z-index:0;object-position:60% 0%;grid-row:2/2}.card-how--vertical .description{text-align:left;grid-row:3/3;align-items:flex-start;max-width:100%;min-height:100%;padding:30px;display:flex}.card-how--vertical h4{font-size:1rem}.card-how--horizontal{grid-template-rows:0 calc(100% - 75px) 75px;grid-template-columns:50% 50%;place-items:center;width:100%;min-height:400px;max-height:400px;display:grid;position:relative;overflow:hidden}.card-how--horizontal h3{background:var(--color-secondary);color:#fff;z-index:1;flex-direction:row;grid-area:3/1/3/2;justify-content:center;align-items:center;width:100%;height:75px;font-weight:600;animation:.5s ease-in slideToTop;display:flex;position:absolute;bottom:0}.card-how--horizontal .index{z-index:1;background:var(--color-primary);grid-area:1/1/2/1;justify-content:center;align-items:center;min-width:75px;max-width:75px;height:100%;min-height:75px;max-height:75px;display:flex;position:absolute;top:0;left:0}.card-how--horizontal p{color:#fff;font-size:3rem;animation:.5s ease-in fadeIn}.card-how--horizontal img{z-index:0;border-top:5px solid var(--color-primary);object-fit:cover;object-position:50% 15%;grid-area:1/1/4/2;width:100%;position:relative}.card-how--horizontal .bloc{z-index:1;background:#f4f4f4;flex-direction:column;grid-area:1/2/4/6;justify-content:center;min-width:100%;min-height:100%;max-height:100%;padding:15px 30px;display:flex}.card-how--horizontal .bloc ul{z-index:3;flex-direction:column;justify-content:flex-start;display:flex;overflow-y:scroll}.card-how--horizontal .bloc ul li{text-align:left;border-bottom:1px solid #d3d3d3;padding:15px 0;list-style:square;position:relative}.card-how--horizontal .bloc ul li:last-child{border:none;padding-bottom:0}.card-how--horizontal .bloc ul li::marker{color:var(--color-primary);animation:.5s ease-in fadeIn}@media (min-width:701px) and (max-width:1120px){.card-how--vertical{grid-template-rows:auto auto auto;width:100%}.card-how--vertical img{object-position:0% 20%}.card-how--horizontal:first-child img{object-position:55% 0%}}@media (max-width:768px){.card-how--vertical{border:1px solid var(--color-secondary);grid-template-rows:30px 150px 1fr;justify-items:center;width:100%;overflow:hidden}.card-how--vertical p{padding:5px 0;font-size:1rem}.card-how--vertical img{object-position:0% 15%}.card-how--vertical .description{padding:15px}.card-how--horizontal{min-height:auto;max-height:inherit;grid-template-rows:auto auto 200px auto;grid-template-columns:1fr}.card-how--horizontal .index{min-width:60px;max-width:60px;min-height:60px;max-height:60px;animation:inherit;grid-row:2/3}.card-how--horizontal .index p{font-size:2rem;font-weight:600}.card-how--horizontal h3{color:#000;background:0 0;grid-row:1/1;height:auto;animation:.5s fadeIn;position:relative;bottom:0}.card-how--horizontal img{z-index:0;border-top:5px solid var(--color-primary);animation:inherit;object-position:50% 15%;grid-row:3/3;animation-delay:.5s}.card-how--horizontal .bloc{min-height:auto;max-height:inherit;border-bottom:none;grid-area:4/1/4/1;margin:0;padding:15px}.card-how--horizontal .bloc ul li::marker{display:none}}