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 {
        display: flex;
        justify-content: center;
        margin-bottom: 80px;
    }

    /* Card shopping */

    .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;
    }

    /* Card bag */

    .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;
    }

    /* Card coin */

    .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;
    }

    /* Imagens laptops */

    .info-laptop {
        background-color: #E0E0E0;
        max-height: 530px;

    }

    .info-container {
        display: flex;
        justify-content: center;
        margin: 0px 72px;
        bottom: -62px;
        position: relative;
    }

    .div-laptop2 {
        margin-left: 39px;
        margin-right: 39px;

    }

    .img-laptop1 {
        max-width: 100%;
    }

    .img-laptop2 {
        max-width: 100%;
    }

    .img-laptop3 {
        max-width: 100%;
    }

    /* Último card */

    .card-information {
        display: flex;
        justify-content: center;
        margin: 129px 72px 108px;
    }

    .card-dollar {
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
        margin-right: 16px;
        text-align: center;
    }.card-dollar img {
        margin: 35px 0px 15px;
    }.card-dollar figcaption {
        font-size: 16px;
        line-height: 24px;
        margin: 0px 32px 65px 33px;
    }

    .card-moeda {
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
        margin-right: 16px;
        text-align: center;
    }.card-moeda img {
        margin: 35px 0px 15px;
    }.card-moeda figcaption {
        font-size: 16px;
        line-height: 24px;
        margin: 0px 32px 65px 33px;
    }

    .card-laptop {
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
        margin-right: 16px;
        text-align: center;
    }.card-laptop img {
        margin: 35px 0px 15px;
    }.card-laptop figcaption {
        font-size: 16px;
        line-height: 24px;
        margin: 0px 32px 65px 33px;
    }

    .card-smartphone {
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
        text-align: center;
    }.card-smartphone img {
        margin: 35px 0px 15px;
    }.card-smartphone figcaption {
        font-size: 16px;
        line-height: 24px;
        margin: 0px 32px 65px 33px;
    }

    /* Informação Final */

    .information {
        max-width: 28.60%;
        margin: 0 auto;
        margin-bottom: 50px;
    }.information h1 {
        text-align: center;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
    }.information p {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }


    .img-information {
        max-width: 70.85%;
        margin: 0 auto;
    }.img-information img {
        width: 100%;
    }

    /* Footer */

    .container-footer{
        background-color: #000000;
        margin-top: 116px;
    }.container-footer p {
        text-align: center;
        color: #BDBDBD;
        line-height: 12px;
        font-size: 10px;
        text-transform: uppercase;
    }

    .info-footer{
        padding: 38px 0px;
    }
    
    .img-footer {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        margin-bottom: 17px;
    }

    .info-footer a {
        text-decoration: none;
        color: #FFFFFF;
    }.info-footer p {
        text-align: center;
        color: #BDBDBD;
    }

    .img-facebook {
        margin: 0px 21.51px;
    }


}

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

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

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

    /* BANNER */

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

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

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

    .info-monitor {
        width: 100%;
    }
    .info-card {
        display: block;
        width: 100%;
    }

    .card-information{
        max-width: 100%;
        display: block;
    }

}

@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%;
    }
}