CSS - MEDIA QUERIES

    // CONTAINER QUERIES
    .article{container-type: insline-size}
    @container(min-width:700px){
        .card{flex-direction: column}
    }

    units

    // MEDIA QUERIES
    //OPERATORS: and or only, use of commas

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {...}

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {...}

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {...}

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {...}

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {...}

    // EXAMPLES
    @media print{
        div{
            color: green;
        }
    }
    
    @media (max-width: 700px) {
        div{
            color: blue;
        }
    }
    
    @media (orientation: landscape) { /*Solo cuando la pantalle esté en horizontal*/
        div {
            color: yellow;
        }
    }
    
    @media (min-width: 800px) and (max-width: 1000px){
        div{
            color: pink;
        }
    }
    
    @media (min-width: 701px) and (max-width: 799px){
        div{
            color: rgb(12, 166, 212);
        }
    }
    
    
    
    @media (max-width: 800px), (orientation: landscape){
        .div2{
            color: rgb(175, 44, 34);
        }
    }

    Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener().    

    // MEDIA QUERIES
    @media
    @media print
    @media screen
    @media all
    @media (orientantion: landscape)
    @media (min-width: 800px) and (max-width: 1000px)
    OR is with , - @media (max-width: 800px), (orientation: landscape)