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

fix: add responsive to main, offer, result sections

Browse Source
This commit is contained in:
Valery Grunenko
2025-06-05 16:24:45 +03:00
parent 7d0fb5638e
commit 78f98a2a8c
8 changed files with 692 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,58 +1,135 @@
.Result {
margin: 0 auto;
width: rem(1340px);
padding: rem(160px) 0 rem(80px);
width: rem(320px);
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 {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(60px);
font-size: rem(28px);
line-height: 100%;
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 {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: rem(48px);
margin-bottom: rem(80px);
flex-direction: column-reverse;
gap: rem(20px);
margin-bottom: rem(40px);
@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) {
flex-direction: row-reverse;
flex-direction: column-reverse;
@include iftablet {
flex-direction: row-reverse;
}
}
.Review {
flex: 1;
flex: 1 0;
.Title {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(48px);
font-size: rem(28px);
line-height: 100%;
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 {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 24px;
font-size: rem(18px);
line-height: 100%;
color: $color-text;
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(24px);
}
}
}
.Picture {
flex: 1;
flex: 1 rem(220px);
position: relative;
overflow: hidden;
border-radius: rem(28px);
object-fit: contain;
max-width: rem(720px);
height: rem(540px);
max-width: rem(320px);
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 {
content: '';
display: block;