.header{ display:flex; justify-content:center; align-items:center; padding:29px 0; background:#000 } .header__logo { display: block; } .banner { margin-bottom: 74px; } .banner__img { width: 100%; display: block; } .home-destaque { display: flex; justify-content: center; align-items: center; flex-direction: column; } .home-destaque__text { display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 766px; } .home-destaque__text__subtitle { font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; } .home-destaque__text__title { font-weight: 500; font-size: 48px; line-height: 58px; margin-bottom: 28px; text-transform: uppercase; } .home-destaque__text__description { font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; margin-bottom: 74px; } .home-destaque__img { width: 16%; margin-bottom: 180px; } .cards { display: grid; grid-template-columns: repeat(3, max-content); gap: 20px; justify-content: center; } .cards__card{ display: flex; justify-content: center; align-items: center; flex-direction: column; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); padding: 36px 26px 26px; } .card__img { display: block; margin-bottom: 26px; } .card__description { padding: 0 25px 27px; text-align: center; max-width: 300px; } .carousel{ margin-top: 80px; background: #E0E0E0; } .carousel__products { display: grid; grid-template-columns: repeat(3, max-content); gap: 40px; justify-content: center; top: 62px; position: relative; } .carousel__products_img { width: 30vw; max-width: 566px; display: block; } .bottom-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; justify-content: center; margin-top: 190px; padding: 0 72px; } .bottom-cards__card{ display: flex; justify-content: center; align-items: center; flex-direction: column; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); padding: 36px 26px 26px; } .bottom-card__img { display: block; margin-bottom: 26px; } .bottom-card__description { padding: 0 25px 27px; text-align: center; max-width: 300px; } .home-description { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 110px; } .home-description__text { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 32px; } .home-description__text__subtitle { font-weight: 600; font-size: 32px; line-height: 40px; text-align: center; text-transform: uppercase; } .home-description__text__description { font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; width: 28%; } .home-description__img { width: 70%; margin-bottom: 130px; } .footer{ display: flex; justify-content: center; flex-direction: column; align-items: center; background: #000; padding: 38px 0 ; } .footer__logos { display: flex; list-style: none; margin-bottom: 12px; } .footer__logo { margin: 0 8px; } .footer__text { font-weight: 400; font-size: 10px; line-height: 12px; text-transform: uppercase; color: #BDBDBD; } @media screen and (min-width: 769px) and (max-width: 1200px) { .home-destaque__img { width: 58%; max-width: 240px; } .cards { grid-template-columns: repeat(2, max-content); } .card__description, .bottom-card__description { max-width: 230px; } .bottom-cards{ grid-template-columns: repeat(2, 1fr); } .home-description__text__description { width: 85%; } } @media screen and (max-width: 768px) { .home-destaque__text { padding: 0 28px; } .home-destaque__text__subtitle { font-size: 20px; line-height: 24px; } .home-destaque__text__title{ font-size: 28px; line-height: 34px; } .home-destaque__text__description { text-align: center; } .home-destaque__img { width: 58%; max-width: 240px; } .cards, .bottom-cards { grid-template-columns: 1fr; padding: 0 28px; } .carousel__products { grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 14px; row-gap: 24px; padding: 0 26px; } .carousel__products_img { width: 42vw; } .product3 { grid-column: 1/3; width: 88vw; max-width: none; } .home-description { flex-direction: column-reverse; } .home-description__text{ padding: 0 26px ; } .home-description__text__subtitle{ font-weight: 600; font-size: 24px; line-height: 30px; } .home-description__text__description { width: 85%; } .home-description__img { margin-bottom: 50px; } .footer__text{ max-width: 250px; text-align: center; } } @media screen and (min-width: 415px) { .banner__img__mobile { display: none; } } @media screen and (max-width: 414px) { .banner__img__desktop { display: none; } } @media screen and (max-width: 300px) { .home-destaque__text__title{ font-size: 26px; } .cards__card, .bottom-cards__card{ max-width: 235px; } }