challenge-landing-page-thiago-bronisio/style.css

* {
    margin: 0px;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

@media screen and (max-width: 2500px) {

    /* Header */
    .container-header {
        background-color: #000000;
    }

    .logo-m3 {
        display: flex;
        padding: 29px 0px;
        justify-content: center;
    }

    /* Banner */
    .banner {
        display: flex;
        width: 100%;
        margin-bottom: 76px;
    }

    /*Fisrt section */

    .info-dolor {
        max-width: 40.26%;
        margin: 0 auto;
    }.info-title {
        font-size: 32px;
        line-height: 39px;
        font-weight: 400px;
        text-transform: uppercase;
        text-align: center;
    }.info-dolor h1 {
        font-size: 48px;
        line-height: 58px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
    }.info-content {
        margin: 28px 0px 84px 0px;
        text-align: start;
    }

    /* Imagem três monitores */

    .info-monitor{
        display: flex;
        max-width: 16,35%;
        justify-content: center;
        margin-bottom: 179px;
    }

    /* Card da primeira section */

    .info-card {
        max-width:56,90%;
        display: flex;
        justify-content: center;
    }
    .info-shop{
        max-width: 350px;
        text-align: center;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
    }.info-shop img{
        margin-bottom: 27px;
        margin-top: 35px;
    }.info-shop figcaption {
        line-height: 24px;
        max-width: 299px;
        margin-bottom: 27px;
    }
    
    .info-bag{
        max-width: 350px;
        text-align: center;
        margin: 0px 21px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
    }.info-bag img {
        margin-bottom: 27px;
        margin-top: 35px;
    }.info-bag figcaption {
        line-height: 24px;
        max-width: 299px;
        margin-bottom: 27px;
    }
    
    .info-coin{
        max-width: 350px;
        text-align: center;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
    }.info-coin img {
        margin-bottom: 27px;
        margin-top: 35px;
    }.info-coin figcaption {
        line-height: 24px;
        max-width: 299px;
        margin-bottom: 27px;
    }

    .img-embacada {
        width: 100%;
        font-size: 16px;
        line-height: 24px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1024px) {

    /* HEADER */
    .container-header {
        background-color: #000000;
    }

    .logo-m3 {
        display: flex;
        padding: 29px 0px;
        justify-content: center;
    }

    /* BANNER */

    .banner {
        display: flex;
        width: 100%;
    }

    .img-embacada {
        display: flex;
        width: 100%;
    }

    .img-laptop {
        display: flex;
        width: 100%;
    }

}

@media screen and (min-width: 2501px) {
    .container-header {
        background-color: #000000;
    }

    .logo-m3 {
        display: flex;
        padding: 29px 0px;
        justify-content: center;
    }

    .banner {
        display: flex;
        width: 100%;
    }

    .img-embacada {
        display: flex;
        width: 100%;
    }
}