@media screen and (min-width: 480px) {
    /* .features__title {
        font-size: 2.5rem;
    } */
    .features__video {
        height: 380px;
    }
    .features__slides {
        height: calc(360px + 3rem);
    }
    .feature__slide {
        height: 360px;
    }
    .swiper {
        height: 360px;
    }
    .credentials__card-image {
        max-width: 65%;
    }
}

@media screen and (min-width: 768px) {
    body {      
        
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: contain, contain, cover;
        background-position: left, right, center;
        background-attachment: fixed, fixed, fixed;
        padding: 0 4rem;
    }
    .no-webp body,
    .no-js body {
        background-image:
            url('../assets/images/elementos_izquierda-compress.png'),
            url('../assets/images/elementos_derecha-compress.png'),
            url('../assets/images/fondo-compress.png');
    }
    .webp body {
        background-image:
            url('../assets/images/webp/elementos_izquierda-compress.webp'),
            url('../assets/images/webp/elementos_derecha-compress.webp'),
            url('../assets/images/webp/fondo-compress.webp');
    }
    .features__header,
    .learn_more__header {
        margin-bottom: 4rem;
    }
    .features__title {
        font-size: 3.563rem;
    }
    .features__video {
        height: 520px;
        max-width: 1080px;
        width: 100%;
        margin-bottom: 6rem;
    }
    .features__slides {
        margin: 6rem 0 4rem;
    }
    .credentials__title {
        font-size: 3.563rem;
    }
    .credentials__subtitle {
        font-size: 1.75rem;
    }
    .credentials__card-image {
        max-width: 60%;
    }
    .credentials__card {
        text-align: left;
    }
    .learn_more__title {
        font-size: 3.563rem;
    }
    .menu__toggler {
        left: 60px;
    }
    .menu__toggler span,
    .menu__toggler span::before,
    .menu__toggler span::after {
        left: 4rem;
    }
    .menu__toggler.active > span::before,
    .menu__toggler.active > span::after {
        left: 4rem;
    }
}

@media screen and (min-width: 1024px) {
    .button {
        font-size: 1.563rem;
        width: 340px;
        height: 85px;
    }
    .credentials {
        margin-bottom: 8rem;
    }
    .credentials__card {
        display: flex;
        align-items: center;
    }
    .credentials__card picture {
        width: 40%;
    }
    .credentials__card-image {
        max-width: 100%;
    }
    .credentials .credentials__card:nth-of-type(1) {
        margin-bottom: 0rem;
        flex-direction: row-reverse;
    }
    .credentials .credentials__card:nth-of-type(2) {
        text-align: right;
    }
    .credentials .credentials__card:nth-of-type(1) .credentials__card-info {
        margin-right: 4rem;
    }
    .credentials .credentials__card:nth-of-type(2) .credentials__card-info {
        margin-left: 4rem;
    }
    .credentials__card-info {
        width: calc(60% - 4rem);
    }
    .credentials__card-title {
        font-size: 3.813rem;
    }
    .features__slides {
        margin: 6rem 0;
    }
    .features__slides {
        height: 320px;
        overflow: hidden;
    }
    .feature__slide {
        height: 320px;
    }
    .features__info {
        margin-bottom: 4rem;
    }
    .swiper {
        height: 320px;
        overflow: hidden;
    }
    .menu {
        width: 30%;
        left: -30%;
    }
    .menu a {  
        font-size: 3.2rem;
        line-height: 1.5;
    }
}

@media screen and (min-width: 1500px) {
    .menu__toggler {
        background-color: transparent;
    }
    .menu__toggler span,
    .menu__toggler span::before,
    .menu__toggler span::after {
        background: var(--color-white);
    }
    .menu__bar {
        display: none;
    }
}