.order{ display: flex; } .order__title{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 117%; text-transform: uppercase; color: var(--text-black); } .order__contacts{ width: calc(50% - 0.5px); padding: 24px; border-right: 1px solid #121212; } .order-contacts__header{ display: flex; justify-content: space-between; align-items: center; } .order-contacts__form{ margin-top: 24px; } .order-contacts__delivery{ margin-top: 47.5px; padding-top: 48px; border-top: 1px solid var(--background-grey); } .order-contacts-deliver__item{ margin-top: 24px; } .order-contacts-deliver__date{ padding: 8px; border-radius: 24px; background: var(--background-grey); } .order-contacts-deliver__date .form-input-radio__item{ margin-top: 24px; } .order-contacts-deliver__date .form-input-radio__item:first-child{ margin-top: 0; } .order__your{ width: calc(50% - 0.5px); padding: 24px 24px 24px 48px; background: var(--background-grey); } .order-your__products{ margin-top: 48px; } .order-your-products__item{ margin-top: 16px; display: flex; justify-content: space-between; } .order-your-products__left{ display: flex; } .order-your-products__img{ width: 40px; aspect-ratio: 1; border-radius: 16px; } .order-your-products__content{ margin-left: 16px; } .order-your-products__name{ font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-black); text-decoration: none; } .order-your-products__description{ margin-top: 8px; font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; color: var(--text-6); } .order-your-products__description span{ font-weight: 700; } .order-your-products__description span::before{ margin-left: 3px; content: 'x '; } .order-your-products__right{ display: flex; } .order-your-products__count{ font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-6); } .order-your-products__count::before{ content: 'x'; } .order-your-products__price{ margin-left: 16px; font-family: var(--font-family); font-weight: 700; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-black); } .order-your-products__price::after{ content: 'Р'; } .order-your__calculation{ margin-top: 48px; } .order-your__promo{ display: flex; } .order-your-promo__button{ margin-left: 8px; } .order-your-calculation__item{ margin-top: 24px; display: flex; justify-content: space-between; } .order-your-calculation__title{ font-family: var(--font-family); font-weight: 500; font-size: 20px; line-height: 120%; color: var(--text-black); } .order-your-calculation__value{ font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 200%; text-transform: uppercase; text-align: right; color: var(--text-black); } .order-your-calculation__value--price::after{ content: ' ₽'; } .order-your-calculation__value--discount{ background: var(--gradient-red); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .order-your-calculation__value--discount::before{ content: '- '; } .order-your-calculation__description{ font-family: var(--font-family); font-weight: 500; font-size: 12px; line-height: 133%; text-align: right; color: var(--text-9); } .order-your-calculation__line{ margin-top: 23px; border: 1px solid var(--background-9); } .order-your-calculation__result{ font-family: var(--font-family); font-weight: 700; font-size: 24px; line-height: 117%; text-transform: uppercase; color: var(--text-black); } .order-your-calculation__submit{ margin-top: 48px; } @media only screen and (max-width: 1200px) { .order{ display: block; } .order__contacts, .order__your{ border: none; width: 100%; } } @media only screen and (max-width: 720px) { .order__title{ max-width: 181px; font-size: 20px; line-height: 120%; } .order__your{ margin-top: 16px; } .order__contacts{ padding: 24px 16px; } .order__your{ padding: 40px 16px 9px 16px; } .order-your__promo{ display: block; } .order-your-promo__button{ margin-left: 0; margin-top: 24px; width: 100%; } .order-your-products__content{ max-width: 164px; } .order-your-products__count, .order-your-products__price{ flex-shrink: 0; } }