/* `xxxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1579.98px) {

}
/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}
/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}
@media(min-width: 1024.98px) and (max-width: 1199.98px) {

}
/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 1024.98px) {
    .patologie .el_logo {
        width: 12rem;
        height: 12rem;
    }
}
@media(min-width: 767.98px) and (max-width: 991.98px) {

}
/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 768.98px) {
    .patologie {
        padding-top: 1.5rem;
    }
    .patologie .section-title {
        padding: 0.5rem 0;
    }
    .cont {
        height: 85vh;
    }
    .cont__inner {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: block;
        flex-wrap: nowrap;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x)/ -2);
        margin-left: calc(var(--bs-gutter-x)/ -2);
        flex-direction: column;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
        transition: 1s;
    }
    .cont.s--el-active .cont__inner {
    }
    .el {
        margin-top: 1%;
        position: relative;
        flex: 1 0 0%;
        width: 100%;
        height: 24%;
        row-gap:1%;
        transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
    }
    .el:nth-child(1) {
        transform: none;
        transition: 1s;
    }
    .el:nth-child(2) {
        transform: none;
        transition: 1s;
    }
    .el:nth-child(3) {
        transform: none;
        transition: 1s;
    }
    .el:nth-child(4) {
        transform: none;
        transition: 1s;
    }
    .patologie .el_logo {
        bottom:auto;
        top: 50%;
        left: auto;
        right: 15%;
        transform: translate(50%, -50%);
        height: 8rem;
        width: 8rem;
    }
    .el__preview-cont {
        top: 0;
        justify-content: unset;
        width: 65%;
        left:10%;
    }
    .el__preview-cont .el__heading {
        text-align: left;
    }

    .cont.s--el-active .el:nth-child(1).s--active {
        transform: scale(0);
        transition: 1s;
    }
    .cont.s--el-active .el:nth-child(2).s--active {
        transform: scale(0);
        transition: 1s;
   }
    .cont.s--el-active .el:nth-child(3).s--active {
        transform: scale(0);
        transition: 1s;
   }
    .cont.s--el-active .el:nth-child(4).s--active {
        transform: scale(0);
        transition: 1s;
   }
    .cont.s--el-active .el:nth-child(1):not(.s--active) {
        transform: scale(0);
        transition: 1s;
        height: 0;
   }
    .cont.s--el-active .el:nth-child(2):not(.s--active) {
        transform: scale(0);
        transition: 1s;
        height: 0;
   }
    .cont.s--el-active .el:nth-child(3):not(.s--active) {
        transform: scale(0);
        transition: 1s;
        height: 0;
   }
    .cont.s--el-active .el:nth-child(4):not(.s--active) {
        transform: scale(0);
        transition: 1s;
        height: 0;
   }
   .el.s--active {
       animation-delay:0.8s;
       top:0;
       height: 100%;
       transform: scale(1)!important;
       transition: 1s;
   }
    .el .el__bg {
        width: 100vw;
    }
    .el:nth-child(1) .el__bg {
      transform: translate3d(0%, 0, 0);
    }

    .el:nth-child(2) .el__bg {
      transform: translate3d(0%, 0, 0);
    }

    .el:nth-child(3) .el__bg {
      transform: translate3d(0%, 0, 0);
    }

    .el:nth-child(4) .el__bg {
      transform: translate3d(0%, 0, 0);
    }

    .el .el__bg::before {
        top: 0;
    }
    .cont__inner:hover .el__bg:after {
      opacity: 0;
    }
    .el:hover .el__preview-cont {
        top:0px;
    }
    .el:hover .el_logo {
        transform: translate(50%, -50%);
        overflow: visible;
    }
    .el:hover .el_logo svg {
        transform: scale(1.2);
    }
    .el:hover .el_logo_bg {
        background-color: rgba(135,135,135,0.0);
    }
}
/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .patologie {
        padding-top: 2rem;
    }
    .el__preview-cont {
        top: 0;
        justify-content: center;
        width: 100%;
        left:0;

    }
    .el_logo {
        display: none;
    }
    .el__preview-cont .el__heading {
        text-align: center;
    }
    .el__content .card:hover .play-button {
        transform: translate(250%);
    }
}