redrockjs/fire-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dev #12

Merged
redrockjs merged 4 commits from dev into main 2025-06-06 12:15:01 +00:00
Conversation 0 Commits 4 Files Changed 41 +692 -138
8 changed files with 692 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 78f98a2a8c - Show all commits

29
src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss
View File

@@ -6,13 +6,36 @@
width: 100%; width: 100%;
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-left: 2vw;
@include iftablet{
}
@include iflaptop{
padding-left: rem(16px);
}
@include ifdesktop{
padding-left: rem(32px);
}
} }
.Button { .Button {
position: absolute; position: absolute;
right: rem(2px);
top: calc(50% - 1.6rem);
z-index: 3; z-index: 3;
right: rem(2px);
top: calc(50% - 1.2rem);
min-height: calc(100% - .25rem); min-height: calc(100% - .25rem);
@include iftablet{
top: calc(50% - 1.2rem);
right: rem(3px);
}
@include iflaptop{
top: calc(50% - 1.4rem);
right: rem(4px);
}
@include ifdesktop{
top: calc(50% - 1.6rem);
right: rem(2px);
}
} }

15
src/shared/ui/button/button.module.scss
View File

@@ -2,19 +2,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: rem(10px) rem(32px); padding: rem(8px) rem(28px);
border-radius: rem(28px); border-radius: rem(20px);
min-height: rem(54px); min-height: rem(40px);
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(24px); font-size: rem(16px);
line-height: 100%; line-height: 100%;
transition: all 0.15s linear; transition: all 0.15s linear;
white-space: nowrap; white-space: nowrap;
width: max-content; width: max-content;
@include ifdesktop{
font-size: rem(24px);
padding: rem(10px) rem(32px);
border-radius: rem(28px);
min-height: rem(54px);
}
&_fullWidth { &_fullWidth {
width: 100%; width: 100%;
} }

17
src/shared/ui/input/input.module.scss
View File

@@ -3,16 +3,29 @@
background: $color-white; background: $color-white;
border: 1px solid $color-darkgray; border: 1px solid $color-darkgray;
border-radius: rem(28px); border-radius: rem(28px);
padding: rem(10px) rem(24px); padding: rem(8px) rem(20px);
transition: border ease .5s; transition: border ease .5s;
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(24px); font-size: rem(18px);
line-height: 100%; line-height: 100%;
color: $color-text; color: $color-text;
width: max-content; width: max-content;
@include iftablet{
font-size: rem(18px);
}
@include iflaptop{
font-size: rem(20px);
padding: rem(10px) rem(20px);
}
@include ifdesktop{
font-size: rem(24px);
}
&:focus { &:focus {
border-color: $color-orange; border-color: $color-orange;
transition: border-color ease .5s; transition: border-color ease .5s;

12
src/views/home/ui/home.tsx
View File

@@ -1,9 +1,9 @@
import Main from './main/main'; import Main from './main/main';
import Offer from './offer/offer'; import Offer from './offer/offer';
import Result from './result/result'; import Result from './result/result';
import License from './license/license'; // import License from './license/license';
import Contacts from './contacts/contacts'; // import Contacts from './contacts/contacts';
import Footer from './footer/footer'; // import Footer from './footer/footer';
export default function HomePage() { export default function HomePage() {
return ( return (
@@ -11,9 +11,9 @@ export default function HomePage() {
<Main /> <Main />
<Offer /> <Offer />
<Result /> <Result />
<License /> {/*<License />*/}
<Contacts /> {/*<Contacts />*/}
<Footer /> {/*<Footer />*/}
</> </>
); );
} }

208
src/views/home/ui/main/main.module.scss
View File

@@ -1,7 +1,20 @@
.Main { .Main {
margin: 0 auto; margin: 0 auto;
width: rem(1340px); width: 90vw;
//padding: 0 rem(160px) 0;
@include iftablet {
margin: 0 auto;
width: rem(712px);
}
@include iflaptop {
width: rem(930px);
}
@include ifdesktop {
width: rem(1340px);
}
&_BgWrapper { &_BgWrapper {
position: absolute; position: absolute;
@@ -38,17 +51,46 @@
gap: rem(30px); gap: rem(30px);
.Icon { .Icon {
width: rem(60px); display: none;
height: rem(60px);
cursor: pointer; cursor: pointer;
@include iftablet {
display: block;
width: rem(40px);
height: rem(40px);
}
@include ifdesktop {
width: rem(60px);
height: rem(60px);
}
} }
.Button { .Button {
display: flex; display: none;
flex-direction: row;
gap: rem(16px); @include iflaptop {
height: rem(48px); display: flex;
padding: rem(24px); flex-direction: row;
gap: rem(16px);
height: rem(40px);
padding: rem(20px);
}
@include ifdesktop {
gap: rem(16px);
height: rem(48px);
padding: rem(24px);
}
img {
width: rem(30px);
height: rem(30px);
@include ifdesktop {
width: rem(40px);
height: rem(40px);
}
}
} }
} }
} }
@@ -56,50 +98,141 @@
.Info { .Info {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
padding: rem(160px) 0 rem(200px); padding: rem(64px) 0 rem(160px);
gap: rem(100px);
@include iftablet {
flex-direction: row;
gap: unset;
}
@include iflaptop {
}
@include ifdesktop {
}
@include iftablet {
padding: rem(130px) 0 rem(160px);
}
@include iflaptop {
padding: rem(130px) 0 rem(160px);
}
@include ifdesktop {
padding: rem(160px) 0 rem(200px);
}
.Content { .Content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
gap: rem(60px); gap: rem(50px);
@include iftablet {
gap: rem(40px);
}
@include iflaptop {
gap: rem(50px);
}
@include ifdesktop {
gap: rem(60px);
}
.Title { .Title {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(60px); font-size: rem(24px);
line-height: 1; line-height: 120%;
color: $color-white; color: $color-white;
max-width: rem(960px); //max-width: rem(960px);
@include iftablet {
font-size: rem(28px);
max-width: rem(360px);
}
@include iflaptop {
font-size: rem(32px);
max-width: rem(508px);
}
@include ifdesktop {
font-size: rem(60px);
max-width: rem(960px);
}
} }
.List { .List {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
gap: rem(16px); gap: rem(18px);
@include iftablet {
gap: rem(20px);
}
@include ifdesktop {
gap: rem(16px);
}
} }
.ListItem { .ListItem {
position: relative; position: relative;
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: rem(26px); font-size: rem(16px);
line-height: 1; line-height: 1;
color: $color-white; color: $color-white;
margin-left: rem(36px); margin-left: rem(24px);
@include iftablet {
font-size: rem(18px);
margin-left: rem(36px);
max-width: rem(360px);
}
@include iflaptop {
font-size: rem(20px);
margin-left: rem(36px);
max-width: rem(400px);
}
@include ifdesktop {
font-size: rem(26px);
margin-left: rem(36px);
max-width: rem(730px);
}
&:after { &:after {
position: absolute; position: absolute;
top: rem(2px); top: 0;
left: 0; left: 0;
content: ''; content: '';
width: rem(24px); width: rem(16px);
height: rem(24px); height: rem(16px);
background: url("/svg/check.svg") no-repeat; background: url("/svg/check.svg") no-repeat;
background-size: rem(24px) rem(24px); background-size: rem(16px) rem(16px);
margin-left: rem(-36px); margin-left: rem(-24px);
@include iftablet {
top: rem(2px);
width: rem(20px);
height: rem(20px);
background-size: rem(20px) rem(20px);
margin-left: rem(-36px);
}
@include ifdesktop {
top: rem(2px);
width: rem(24px);
height: rem(24px);
background-size: rem(24px) rem(24px);
margin-left: rem(-36px);
}
} }
} }
} }
@@ -111,13 +244,38 @@
align-items: center; align-items: center;
flex-basis: 40%; flex-basis: 40%;
gap: rem(40px); gap: rem(40px);
text-wrap: nowrap;
@include iftablet {
gap: rem(40px);
}
@include iflaptop {
gap: rem(40px);
}
@include ifdesktop {
gap: rem(40px);
}
.Title { .Title {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: rem(60px); font-size: rem(36px);
line-height: 1; line-height: 100%;
color: $color-white; color: $color-white;
@include iftablet {
font-size: rem(40px);
}
@include iflaptop {
font-size: rem(40px);
}
@include ifdesktop {
font-size: rem(60px);
}
} }
} }
} }

367
src/views/home/ui/offer/offer.module.scss
View File

@@ -1,91 +1,241 @@
.Offer { .Offer {
background: $color-lightgray; background: $color-lightgray;
border-radius: rem(28px); border-radius: rem(28px);
padding: rem(160px) 0; padding: rem(32px) 0 0;
@include iftablet {
padding: rem(60px) 0 rem(40px);
}
@include iflaptop {
padding: rem(60px) 0 rem(60px);
}
@include ifdesktop {
padding: rem(160px) 0;
}
} }
.InnerContainer { .InnerContainer {
margin: 0 auto; margin: 0 auto;
width: rem(1340px);
@include iftablet {
margin: 0 auto;
width: rem(712px);
}
@include iflaptop {
width: rem(930px);
}
@include ifdesktop {
width: rem(1340px);
}
} }
.Title { .Top {
font-family: $font-open-sans; padding: 0 rem(20px) rem(30px);
font-weight: $font-semi-bold;
font-size: rem(60px);
line-height: 100%;
color: $color-text;
max-width: rem(1330px);
margin-bottom: rem(80px);
}
.Text { @include iftablet {
font-family: $font-open-sans; padding: 0;
font-weight: $font-regular; }
font-size: rem(32px);
line-height: 100%;
color: $color-text;
margin-bottom: rem(20px);
}
.List { .Header {
display: flex; font-family: $font-open-sans;
flex-direction: column; font-weight: $font-semi-bold;
align-items: flex-start; font-size: rem(26px);
max-width: rem(1330px); line-height: 120%;
margin-bottom: rem(60px); color: $color-text;
margin-bottom: rem(40px);
.ListItem { @include iftablet {
font-size: rem(28px);
}
@include iflaptop {
font-size: rem(32px);
}
@include ifdesktop {
font-size: rem(60px);
margin-bottom: rem(80px);
}
}
.Text {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(32px); font-size: rem(18px);
line-height: 160%; line-height: 100%;
color: $color-text; color: $color-text;
list-style-type: decimal; margin-bottom: rem(20px);
margin-left: rem(40px);
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(32px);
}
}
.List {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: rem(30px);
@include iftablet {
margin-bottom: rem(40px);
}
@include ifdesktop {
margin-bottom: rem(60px);
}
.ListItem {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(18px);
line-height: 160%;
color: $color-text;
list-style-type: decimal;
margin-left: rem(40px);
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(32px);
margin-left: rem(40px);
}
}
} }
} }
.RowForm { .RowForm {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
gap: rem(40px); justify-content: space-around;
justify-content: center; align-items: center;
gap: rem(10px);
margin-bottom: rem(80px); margin-bottom: rem(80px);
@include iftablet {
flex-direction: row;
justify-content: center;
gap: rem(10px);
}
@include iflaptop {
justify-content: center;
gap: rem(20px);
}
@include ifdesktop {
justify-content: center;
gap: rem(40px);
}
.Unit {
width: 300px;
@include iftablet {
width: unset;
}
}
} }
.Inner { .Inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
background-color: $color-white; background-color: $color-white;
border-radius: rem(28px); border-radius: rem(28px);
padding: rem(80px) rem(40px); padding: rem(30px) rem(20px);
margin-bottom: rem(130px); margin-bottom: rem(40px);
@include iftablet {
align-items: flex-start;
padding: rem(28px) rem(20px);
}
@include iflaptop {
padding: rem(40px);
margin-bottom: rem(80px);
}
@include ifdesktop {
border-radius: rem(28px);
padding: rem(80px) rem(40px);
margin-bottom: rem(130px);
}
.Title { .Title {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: rem(60px); font-size: rem(26px);
line-height: 100%; line-height: 100%;
color: $color-text; color: $color-text;
max-width: rem(320px);
@include iftablet {
font-size: rem(28px);
max-width: unset;
}
@include iflaptop {
font-size: rem(36px);
}
@include ifdesktop {
font-size: rem(60px);
margin-bottom: rem(40px);
}
} }
.Grid { .Grid {
display: grid; display: grid;
grid-template-rows: repeat(2, 1fr); grid-template-columns: rem(320px);
grid-template-columns: repeat(3, 1fr); gap: rem(20px);
gap: rem(40px); padding: rem(20px) 0;
padding: rem(40px) 0;
@include iftablet {
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: rem(25px);
padding: rem(20px) 0;
}
@include iflaptop {
gap: rem(30px);
padding: rem(40px) 0;
}
@include ifdesktop {
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: rem(40px);
padding: rem(40px) 0;
}
} }
.Tile { .Tile {
position: relative; position: relative;
padding: rem(25px); height: rem(220px);
height: rem(352px); padding: rem(20px);
border-radius: rem(28px); border-radius: rem(28px);
overflow: hidden; overflow: hidden;
@include iflaptop {
height: rem(260px);
}
@include ifdesktop {
height: rem(352px);
padding: rem(25px);
}
&:after { &:after {
content: ''; content: '';
display: block; display: block;
@@ -127,9 +277,21 @@
z-index: 2; z-index: 2;
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(42px); font-size: rem(24px);
line-height: 100%; line-height: 100%;
color: $color-white; color: $color-white;
@include iftablet {
font-size: rem(28px);
}
@include iflaptop {
font-size: rem(32px);
}
@include ifdesktop {
font-size: rem(42px);
}
} }
.Description { .Description {
@@ -138,32 +300,75 @@
display: none; display: none;
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(24px); font-size: rem(18px);
line-height: 130%; line-height: 130%;
color: $color-white; color: $color-white;
@include iftablet {
font-size: rem(18px);
}
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(24px);
}
} }
.Arrow { .Arrow {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
right: rem(25px); right: rem(10px);
bottom: rem(25px); bottom: rem(10px);
width: rem(64px); width: rem(40px);
height: rem(64px); height: rem(40px);
transform: rotate(-135deg); transform: rotate(-135deg);
transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out;
@include iflaptop {
right: rem(16px);
bottom: rem(16px);
width: rem(48px);
height: rem(48px);
}
@include ifdesktop {
right: rem(25px);
bottom: rem(25px);
width: rem(64px);
height: rem(64px);
}
} }
} }
} }
.Form { .Form {
position: relative; position: relative;
padding: rem(40px) rem(60px);
background: #292E3D; background: #292E3D;
border-radius: rem(28px);
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
gap: rem(20px);
padding: rem(25px) rem(20px);
border-radius: rem(28px);
@include iftablet {
padding: rem(30px);
}
@include iflaptop {
grid-template-rows: 1fr;
grid-template-columns: auto rem(400px);
padding: rem(40px);
}
@include ifdesktop {
grid-template-columns: auto rem(550px);
padding: rem(40px) rem(60px);
}
&:after { &:after {
content: ''; content: '';
@@ -190,8 +395,33 @@
} }
.PanelRight { .PanelRight {
width: 100%; place-self: center center;
place-self: end end;
@include iftablet{
width: rem(400px);
place-self: end end;
}
@include iflaptop{
width: 100%;
}
.AdvPhoneInput{
display: none;
@include iftablet{
display: block;
}
}
.MobileBtns {
position: relative;
display: flex;
flex-direction: column;
gap: rem(12px);
z-index: 2;
max-width: rem(400px);
@include iftablet{
display: none;
}
}
} }
.SubTitle { .SubTitle {
@@ -199,10 +429,23 @@
z-index: 2; z-index: 2;
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-light; font-weight: $font-light;
font-size: rem(30px); font-size: rem(22px);
line-height: 100%; line-height: 100%;
color: $color-white; color: $color-white;
margin-bottom: rem(16px); margin-bottom: rem(16px);
@include iftablet {
margin-bottom: rem(20px);
}
@include iflaptop {
font-size: rem(24px);
}
@include ifdesktop {
font-size: rem(30px);
margin-bottom: rem(16px);
}
} }
.Title { .Title {
@@ -210,10 +453,22 @@
z-index: 2; z-index: 2;
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(48px); font-size: rem(26px);
line-height: 130%; line-height: 130%;
color: $color-white; color: $color-white;
max-width: rem(660px); max-width: rem(660px);
margin: 0; margin: 0;
@include iftablet {
font-size: rem(28px);
}
@include iflaptop {
font-size: rem(32px);
}
@include ifdesktop {
font-size: rem(48px);
}
} }
} }

71
src/views/home/ui/offer/offer.tsx
View File

@@ -20,38 +20,49 @@ export default function Offer() {
return ( return (
<section className={s.Offer}> <section className={s.Offer}>
<div className={s.InnerContainer}> <div className={s.InnerContainer}>
<h2 className={s.Title}> <div className={s.Top}>
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '} <h2 className={s.Header}>
систему Охранно-Пожарной <br /> Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
сигнализации <Mark> в соответствие </Mark> со всеми нормативами систему Охранно-Пожарной <br />
</h2> сигнализации <Mark> в соответствие </Mark> со всеми нормативами
<p className={s.Text}>Методика работы:</p> </h2>
<ul className={s.List}> <p className={s.Text}>Методика работы:</p>
<li className={s.ListItem}> <ul className={s.List}>
Экспертиза (аудит) выявляет нарушения ОПС <li className={s.ListItem}>
</li> Экспертиза (аудит) выявляет нарушения ОПС
<li className={s.ListItem}> </li>
На основании экспертизы оформляется заключение <li className={s.ListItem}>
</li> На основании экспертизы оформляется заключение
<li className={s.ListItem}> </li>
На основании выявленных нарушений производится устранение <li className={s.ListItem}>
недостатков На основании выявленных нарушений производится устранение
</li> недостатков
<li className={s.ListItem}> </li>
Производится проверка проекта по замене старых пожарных систем на <li className={s.ListItem}>
новые, что позволяет сократить стоимость сметы на модернизацию. Производится проверка проекта по замене старых пожарных систем на
</li> новые, что позволяет сократить стоимость сметы на модернизацию.
</ul> </li>
</ul>
</div>
<form className={s.RowForm}> <form className={s.RowForm}>
<Input type='text' placeholder='+7 (999) 123 45 67' />
<Input <Input
className={s.Unit}
type='text'
placeholder='+7 (999) 123 45 67'
/>
<Input
className={s.Unit}
type='text' type='text'
placeholder='Ваше имя' placeholder='Ваше имя'
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
/> />
<Button variant='orange'>Узнать подробности</Button> <Button className={s.Unit} variant='orange'>
Узнать подробности
</Button>
</form> </form>
<div className={s.Inner}> <div className={s.Inner}>
<h2 className={s.Title}> <h2 className={s.Title}>
Возьмем <Mark>на себя</Mark> все заботы Возьмем <Mark>на себя</Mark> все заботы
@@ -75,6 +86,7 @@ export default function Offer() {
))} ))}
</div> </div>
</div> </div>
<div className={s.Form}> <div className={s.Form}>
<Image <Image
className={s.Background} className={s.Background}
@@ -93,9 +105,18 @@ export default function Offer() {
</div> </div>
<div className={s.PanelRight}> <div className={s.PanelRight}>
<AdvancedPhoneInput <AdvancedPhoneInput
text='Получить консультацию' containerClassName={s.AdvPhoneInput}
text='Отправить заявку'
placeholder={'+7 (999) 123 45 67'} placeholder={'+7 (999) 123 45 67'}
/> />
<div className={s.MobileBtns}>
<Input placeholder='Ваше имя' fullWidth />
<Input placeholder='+7 999 123 45 67' fullWidth />
<Button variant='orange' fullWidth>
Отправить заявку
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>

111
src/views/home/ui/result/result.module.scss
View File

@@ -1,58 +1,135 @@
.Result { .Result {
margin: 0 auto; margin: 0 auto;
width: rem(1340px); width: rem(320px);
padding: rem(160px) 0 rem(80px); padding: rem(60px) 0;
@include iftablet {
margin: 0 auto;
width: rem(712px);
}
@include iflaptop {
width: rem(930px);
padding: rem(80px) 0;
}
@include ifdesktop {
width: rem(1340px);
padding: rem(160px) 0 rem(80px);
}
.Header { .Header {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: rem(60px); font-size: rem(28px);
line-height: 100%; line-height: 100%;
color: $color-text; color: $color-text;
margin-bottom: rem(96px); margin-bottom: rem(40px);
@include iftablet {
font-size: rem(36px);
margin-bottom: rem(60px);
}
@include iflaptop {
font-size: rem(36px);
margin-bottom: rem(80px);
}
@include ifdesktop {
font-size: rem(60px);
margin-bottom: rem(96px);
}
} }
.Row { .Row {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: column-reverse;
justify-content: space-between; gap: rem(20px);
gap: rem(48px); margin-bottom: rem(40px);
margin-bottom: rem(80px);
@include iftablet {
flex-direction: row;
justify-content: space-between;
gap: rem(80px);
margin-bottom: rem(80px);
}
@include ifdesktop {
gap: rem(60px);
margin-bottom: rem(160px);
}
&:nth-child(odd) { &:nth-child(odd) {
flex-direction: row-reverse; flex-direction: column-reverse;
@include iftablet {
flex-direction: row-reverse;
}
} }
.Review { .Review {
flex: 1; flex: 1 0;
.Title { .Title {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: rem(48px); font-size: rem(28px);
line-height: 100%; line-height: 100%;
color: $color-text; color: $color-text;
margin-bottom: rem(40px); margin-bottom: rem(20px);
@include iftablet {
margin-bottom: rem(36px);
}
@include iflaptop {
font-size: rem(32px);
margin-bottom: rem(40px);
}
@include ifdesktop {
font-size: rem(48px);
}
} }
.Description { .Description {
font-family: $font-open-sans; font-family: $font-open-sans;
font-weight: $font-regular; font-weight: $font-regular;
font-size: 24px; font-size: rem(18px);
line-height: 100%; line-height: 100%;
color: $color-text; color: $color-text;
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(24px);
}
} }
} }
.Picture { .Picture {
flex: 1; flex: 1 rem(220px);
position: relative; position: relative;
overflow: hidden;
border-radius: rem(28px); border-radius: rem(28px);
object-fit: contain; object-fit: contain;
max-width: rem(720px); max-width: rem(320px);
height: rem(540px); height: rem(220px);
overflow: hidden;
@include iflaptop {
flex: 1 0;
max-width: rem(440px);
height: rem(260px);
}
@include ifdesktop {
max-width: rem(720px);
height: rem(540px);
}
&:after { &:after {
content: ''; content: '';
display: block; display: block;