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-mobile{display: none;}
    .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: 400;
        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-monitor-mobile{display: none;}
    .info-content {
        margin: 28px 0px 84px 0px;
        text-align: start;
        line-height: 24px;
    }

    /* Imagem três monitores */

    .info-monitor {
        display: flex;
        margin: 0 auto;
        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 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        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 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        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 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        max-width: 299px;
        margin-bottom: 27px;
    }

    /* Imagens laptops */

    .info-laptop {
        background-color: #E0E0E0;
        margin-bottom: 130px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .info-container {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 39px;
        position: relative;
        bottom: -32px;
        width: 92.5%;
    }

    .grid-laptop1,
    .grid-laptop2,
    .grid-laptop3{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-laptop{
        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;
        font-weight: 400;
        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;
        font-weight: 400;
        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;
        font-weight: 400;
        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;
        font-weight: 400;
        margin: 0px 32px 65px 33px;
    }

    /* Informação Final */
    .container-information {
        width: 100%;
    }
    .information {
        width: 70.85%;
        margin: 0 auto;
    }.information h1 {
        text-align: center;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
        text-align: center;
    }.information p {
        margin: 0 auto;
        text-align: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        width: 40.80%;
    }.img-information {
        width: 100%;
        margin-top: 50px;
    }
    @media screen and (min-width: 1025px) {
        .img-oculos{
            display: none;
        }
    }

    /* 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;
        font-weight: 400;
    }

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


}

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

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

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

    /* BANNER */
   .banner {display: none;}
   .banner-mobile{
    width: 100%;
    display: flex;
   }

   /* Info dolor */

   .container-dolor{
    padding: 73px 29px 0px 29px;
    }

   .info-dolor{
    margin: 0 auto;
    width: 100%;
    display: contents;
   }.info-dolor h1 {
    font-weight: 500;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    text-transform: uppercase;
   }
   .info-title{
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
   }
   .info-content{
    text-align: center;
    margin: 46px 0px 65px;
   }

   .info-monitor{
    max-width: 57.70%;
    margin: 0px 88px;
    margin: 0 auto;
   }

    .info-card {
        flex-wrap: wrap;
        margin-top: 90.62px;
    }
    
    .info-shop{
        width: 100%;
        margin: 0 auto;
        margin-bottom: 24px;
    }.info-shop img{
        margin: 0 auto;
        width: 25.10%;
        margin: 36px 0px 27.05px;
    }.info-shop figcaption {
        text-align: center;
        line-height: 24px;
        margin: 0 auto;
        padding: 0px 25.35px 27.50px 26px;
    }

    .info-bag{
        width: 100%;
        margin: 0 auto;
        margin-bottom: 24.05px;
    }.info-bag img{
        width: 25.10%;
        margin: 36px 0px 27.05px;
    }.info-bag figcaption {
        text-align: center;
        line-height: 24px;
        margin: 0 auto;
        padding: 0px 25.35px 27.50px 26px;
    }

    .info-coin{
        width: 100%;
        margin: 0 auto;
    }.info-coin img{
        width: 25.10%;
        margin: 36px 0px 27.05px ;
    }.info-coin figcaption {
        text-align: center;
        line-height: 24px;
        margin: 0 auto;
        padding: 0px 25.35px 27.50px 26px;
    }
    
    .info-laptop{
        width: 100%;
        margin-bottom: 112px;
    }
    .grid-laptop1{
        grid-area: laptop1;
    }
    .grid-laptop2{
        grid-area: laptop2;
    }
    .grid-laptop3{
        grid-area: laptop3;
    }

    .info-container{
       display: grid;
       grid-template-areas:
            "laptop2 laptop1"
            "laptop3 laptop3"
       ;
       column-gap: 14px;
       row-gap: 24px;
       grid-template-columns: unset;
       width: 88.90%;
    }

    .container-card{
        padding: 0px 23px 0px 23px;
    }
    .card-information{
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: 80px;
        max-width: 88.85%;
        max-width: 100%;
        display: block;
    }

    .card-dollar{
        width: 100%;
        max-height: 34.05%;
        margin-bottom: 16px;
    }.card-dollar img{
        margin: 0 auto;
        margin: 35px 0px 15px;
        width: 25.10%;
    }
    .card-dollar figcaption{
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin: 0 auto;
        padding: 0px 33px 65px 33px;
    }


    .card-moeda{
        width: 100%;
        max-height: 34.05%;
        margin-bottom: 16px;
    }.card-moeda img{
        margin: 0 auto;
        margin: 35px 0px 15px;
        width: 25.10%;
    }.card-moeda figcaption{
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin: 0 auto;
        padding: 0px 33px 65px 33px;
    }

    .card-laptop{
        width: 100%;
        max-height: 34.05%;
        margin-bottom: 16px;
    }.card-laptop img{
        margin: 0 auto;
        margin: 35px 0px 15px;
        width: 25.10%;
    }.card-laptop figcaption{
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin: 0 auto;
        padding: 0px 33px 65px 33px;
    }

    .card-smartphone{
        width: 100%;
        max-height: 34.05%;
        margin-bottom: 98px;
    }.card-smartphone img{
        margin: 0 auto;
        margin: 35px 0px 15px;
        width: 20.70%;
    }.card-smartphone figcaption{
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin: 0 auto;
        padding: 0px 33px 65px 33px;
    }
    
    .information{
        width: 100%;
    }.information h1 {
        margin: 0px 50px 9px;
        font-weight: 600;
        font-size: 24px;
        line-height: 29px;
    }.information p {
        width: 84.54%;
        margin: 0px 32px 87px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    
    .img-information{display: none;}
    .img-oculos{
        width: 100%;
        margin-bottom: 50px;
    }
    
    .info-footer{
        padding: 32px 77px 32px;
    }
}

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

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

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

    /*Fisrt section */

    .info-dolor {
        max-width: 40.26%;
        margin: 0 auto;
    }

    .info-title {
        font-size: 62px;
        line-height: 78px;
        font-weight: 400px;
        text-transform: uppercase;
        text-align: center;
    }

    .info-dolor h1 {
        font-size: 96px;
        line-height: 116px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
    }

    .info-monitor-mobile{display: none;}
    .info-content {
        margin: 28px 0px 84px 0px;
        text-align: start;
        font-size: 32px;
    }

    /* Imagem três monitores */

    .info-monitor {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        margin-bottom: 179px;
    }

    /* Card da primeira section */

    .info-card {
        display: flex;
        justify-content: center;
        margin-bottom: 80px;
    }

    /* Card shopping */

    .info-shop {
       width: 18.25%;
        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 {
        font-size: 32px;
        line-height: 48px;
        margin-bottom: 27px;
        text-align: center;
    }

    /* Card bag */

    .info-bag {
        width: 18.25%;
        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 {
        font-size: 32px;
        line-height: 48px;
        margin-bottom: 27px;
        text-align: center;
    }

    /* Card coin */

    .info-coin {
        width: 18.25%;
        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 {
        font-size: 32px;
        line-height: 48px;
        margin-bottom: 27px;
        text-align: center;
    }

    /* Imagens laptops */

    .info-laptop {
        background-color: #E0E0E0;
        margin-bottom: 130px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .info-container {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 39px;
        position: relative;
        bottom: -32px;
        width: 92.5%;
    }

    .grid-laptop1,
    .grid-laptop2,
    .grid-laptop3{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-laptop{
        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: 32px;
        line-height: 48px;
        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: 32px;
        line-height: 48px;
        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: 32px;
        line-height: 48px;
        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: 32px;
        line-height: 48px;
        margin: 0px 32px 65px 33px;
    }

    /* Informação Final */
    .container-information {
        width: 100%;
    }
    .information {
        width: 70.85%;
        margin: 0 auto;
    }.information h1 {
        text-align: center;
        font-weight: 600;
        font-size: 62px;
        line-height: 78px;
        text-align: center;
    }.information p {
        margin: 0 auto;
        font-size: 32px;
        line-height: 48px;
        font-weight: 400;
        text-align: center;
        width: 40.80%;
    }.img-information {
        width: 100%;
        margin-top: 50px;
    }
    @media screen and (min-width: 1025px) {
        .img-oculos{
            display: none;
        }
    }

    /* Footer */

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

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

    .info-footer a {
        text-decoration: none;
        color: #FFFFFF;
    }.info-footer p {
        text-align: center;
        color: #BDBDBD;
        font-size: 20px;
        line-height: 24px;
        font-weight: 400;
    }

    .img-facebook {
        margin: 0px 42px;
    }.font-facebook {
        width: 26px;
    }.font-youtube{
        width: 39px;
    }.font-instagram {
        width: 39px;
    }

}