*[class*='__container'] { padding: 0 42px; } h1 { font-size: 52px; } .hero__content { flex-direction: column; align-items: center; } .hero__leftside { max-width: 100%; align-items: center; text-align: center; } .hero__content::after { opacity: 0.1; right: -140px; } .footer__tel { font-size: 17px; } .header__contacts { gap: 10px; } .header__contacts button.btn, .header__contacts .header__tel p { display: none; } .header__contacts .header__tel { display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; border-radius: 9px; position: relative; padding: 0; background: linear-gradient( 322deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 41.5%, rgba(255, 255, 255, 0) 100% ), #fc0; } .header__contacts .header__tel::before { content: ''; width: 24px; height: 24px; background: url('../img/i-tel.svg') center no-repeat; background-size: cover; } .hero__advantages { grid-template-columns: repeat(2, 1fr); } .hero__advantages-item { flex-direction: row; } .hero__advantages-item p { text-align: left; } .hero__advantages-item p br { content: ''; padding: 0; } .footer__logo { flex-direction: column; text-align: center; } .footer__tel { font-size: 19px; } .footer__contacts { gap: 24px; } .footer__top, .footer__bottom { display: flex; flex-direction: column; gap: 32px; } .footer__bottom { gap: 12px; } .footer__bottom p { padding-bottom: 32px; } @media screen and (max-width: 740px) { .header__logo { max-width: 200px; gap: 12px; } .header__logo img { width: 64px; height: auto; } .header__logo p { font-size: 11px; } } @media screen and (max-width: 670px) { .header__socials-link, .footer__socials-link, .header__contacts .header__tel { width: 40px; height: 40px; } .header__socials-link img, .footer__socials-link img { width: 24px; height: 24px; } .header__contacts .header__tel::before { width: 20px; height: 20px; } .header__tel, .footer__tel { font-size: 18px; } h1 { font-size: 49px; } } @media screen and (max-width: 620px) { *[class*='__container'] { padding: 0 24px; } .header__logo { max-width: 140px; gap: 14px; } .header__logo img { width: 56px; } .hero__advantages { gap: 16px; } .hero__advantages-item { gap: 14px; padding: 16px 14px; border-radius: 16px; } .hero__advantages-icon { min-width: 46px; width: 46px; height: 46px; border-radius: 10px; } .hero__advantages-icon img { width: 30px; height: 30px; } .hero__advantages-item p { font-size: 14px; } h1 { font-size: 42px; } .header__socials-link, .footer__socials-link, .header__contacts .header__tel { width: 37px; height: 37px; } .header__socials-link img, .footer__socials-link img { width: 22px; height: 22px; } .header__contacts .header__tel::before { width: 18px; height: 18px; } .hero { padding-top: 140px; padding-bottom: 64px; } .hero__leftside { gap: 24px; } .hero__desc::before { width: 20px; height: 20px; } .hero__desc p { font-size: 16px; } .hero__price { gap: 12px; margin-right: auto; } .hero__price-header, .hero__price-content { flex-direction: column; gap: 16px; } .hero__price-stock { align-items: center; text-align: center; } .hero__price-header p { font-size: 16px; } .hero__price-stock span { font-size: 18px; } .hero__price-stock p { font-size: 24px; } .hero__price-unit { } .hero__price-unit p { font-size: 16px; } .hero__content::after { opacity: 1; right: -290px; width: 620px; height: 420px; background-size: contain; top: 230px; } .hero__form-title p { font-size: 16px; max-width: 390px; margin-left: auto; margin-right: auto; } .hero__form-action select, .hero__form-action input, .btn-big { font-size: 15px; } .hero__form-gift p, .hero__form-gift ul li { font-size: 14px; } .hero__advantages { margin-top: 64px; } }