/* 1000px/16px = 62.5 1rem = 1em */
@media(max-width:63em){
    html{
        font-size: 52.5%;
    }
    .container{
        width:90rem;
        height: 58rem;
    }

    .section-aside{
        height: 55rem;
        width: 30rem;
        background-size:contain;
        top:0rem
     }
   
    .section-info{
        margin-left: 4rem;
    }
    .nav-selction{
        padding: 4rem;
    }
   
    .btn{
        right:11rem;
    }

    .arcade{
        background-size: 3.5rem;
    }

    .pro{
       background-size: 3.5rem;
    }

    .advanced{
       background-size: 3.5rem;
    }
    
    .link-to-previous-page{
        margin-right: 30rem !important;
    }

    
}

@media(max-width:50em){
    html{
        font-size: 42.5%;
    }

    .nav-selction{
        padding: 3.8rem 3.2rem;
    }

    .section-info{
        margin-left: 0rem;
    }

    .container{
        width:80rem;
    }

    .btn{
        right:10rem;
        margin-top: 1.8rem;
    }

    .info-text{
        line-height: 1.4;
    }

    .error{
        right: 10rem;
    }

    .month-year-switch{
        width: 40rem;
    }

    .grid--1--cols--4--rows{
        grid-template-columns: auto;
    } 

   .element{
    width: 12rem !important;
   }

   .month-year-switch{
    width: 42rem !important;
   }

   .month{
    left:11rem !important;
   }

   .year{
    left:27rem !important;
   }

   .switch{
    left:19rem !important;
   }

   .link-to-previous-page{
    margin-right: 24.5rem !important;
}
}

@media(max-width:30em){
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html{
        font-size: 45.5%;
    }
    .grid--2--cols{
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    body{
        position: relative;
        background-image: url(../images/bg-sidebar-mobile.svg);
        height: 30rem;
        width: 100%;
        background-size:cover;
        background-repeat: no-repeat;
        background-position: bottom;
        margin:1.6rem;
        top:0rem
    }
    .section-aside{
        display: none;
    }

    .container{
        width: 40rem;
        margin: 0 auto;
        top:15rem;
        height: 50rem;
        position: relative;
    }

    .section-info{
        padding-left: 5.2rem;
    }

    .mob-background{
        margin-top: 8rem;
        margin-right: -10rem;
        height: 8rem;
        padding: 0 ;
    }
   
    .nav-selction{
        position: absolute;
        top: -15rem;
        margin-left: -1rem;
    }
    
    ul{
        display: none;
    }

    .nav-element{
        display: inline-block;
    }

    .nav-number{
        margin-left: 4rem;
        font-size: 2rem;
    }

    .error{
        right: 7.5rem;
    }

    .plans{
        flex-direction:column;
    }

    .element{
        padding-top: 0rem !important;
        display: flex;
        gap: 1.4rem;
        align-items: center;
    }

    .pro{
       background-size: 3.5rem;
       display: flex;
    }

    .advanced{
       background-size: 3.5rem;
       display: flex;
    }

    .element{
        width: 30rem !important;
        height: 8rem !important;
    }

    .plan-text{
        padding-top:0rem !important ;
    }

    .container--for--plans{
        height: 68rem;
    
    }

    .month-year-switch{
        width: 30rem !important;
    }
    
    .month{
        left:4rem !important;
    }
    
    .year{
        left:21rem !important;
    }
    
    .switch{
        left:12.5rem !important;
    }

    .link-to-previous-page{
        margin-right: 12.5rem !important;
        margin-left: 5rem;
    }
    
    .month-year-switch{
        top:53rem !important;
        left: 5rem !important;
    }

    .button--link{
        top: 63rem !important;
    }

    .plan-amt{
        position: absolute;
        top:0.5rem
    }

    .offer{
        position: absolute;
        top:5rem
    }
}