@media screen and (max-width: 576px) { .hero__price { margin-top: 24px; } .hero__content::after { right: -320px; top: 290px; } } @media screen and (max-width: 540px) { .header__container { align-items: flex-start; gap: 24px; padding-bottom: 24px; } .header__container::after { content: ''; position: absolute; bottom: 0; left: 24px; width: calc(100% - 48px); height: 1px; background: #e7e7e7; } .header__logo { max-width: 240px; } .header__logo p { font-size: 12px; } .header__contacts { flex-wrap: wrap; width: 100%; justify-content: flex-end; row-gap: 24px; } .header__contacts button.btn { } .header__tel { font-size: 20px; margin: 0; } .hero { padding-top: 170px; } } @media screen and (max-width: 470px) { h1 { font-size: 39px; text-align: left; } .hero__leftside { align-items: flex-start; } .hero__price { margin-top: 12px; } .hero__price-header p { max-width: 160px; } .hero__content { gap: 34px; } .hero__content::after { opacity: 1; right: -290px; width: 520px; height: 320px; background-size: contain; top: 280px; } .hero__form-gift { overflow: hidden; } .hero__form-gift::after { right: -10%; opacity: 0.6; } .hero__advantages { grid-template-columns: 1fr; gap: 6px; } .hero__price { border-radius: 12px; padding: 10px; padding-bottom: 14px; } .hero__price-header { gap: 10px; padding: 10px; border-radius: 10px; } .hero__price-header p { font-size: 14px; } .hero__price-header span { padding: 8px 12px; border-radius: 10px; font-size: 14px; } .hero__price-stock p { font-size: 20px; } .hero__price-stock span { font-size: 15px; } .hero__price-unit { border-radius: 8px; padding: 6px 12px; } .hero__price-unit p { font-size: 13px; } .hero__price-header span::before { width: 16px; height: 16px; } .hero__price-content { gap: 10px; } .header__logo { /* flex-direction: column; align-items: flex-start; */ } .header__logo p { /* max-width: 100%; */ } .header__container { align-items: center; } .header__tel { font-size: 18px; } .hero__form { gap: 20px; padding: 20px 14px; border-radius: 16px; } .hero__form-title p { font-size: 15px; } } @media screen and (max-width: 390px) { h1 { font-size: 36px; } .header__logo img { width: 46px; } .header__logo p { font-size: 11px; } .header__tel { font-size: 17px; } .hero__form-action select, .hero__form-action input { height: 60px; border-radius: 12px; } } @media screen and (max-width: 375px) { *[class*='__container'] { padding-left: 12px; padding-right: 12px; } .header__container { gap: 0; } h1 { font-size: 34px; } .hero__desc::before { display: none; } .header__logo img { width: 44px; } .header__logo p { font-size: 10px; } .header__tel { font-size: 16.5px; } }