Skip to content
Snippets Groups Projects

feat/respo-financing: responsive design

Merged Július Petrik requested to merge feat/respo-financing into main
1 file
+ 60
0
Compare changes
  • Side-by-side
  • Inline
+ 60
0
@@ -120,6 +120,14 @@
.reserved {
padding-bottom: 320px;
@include media-max-xl {
padding-bottom: 120px;
}
@include media-max-md {
padding-bottom: 64px;
}
}
p {
@@ -137,8 +145,25 @@ h2 {
padding-bottom: 90px;
border-bottom: 1px solid $color-grey;
@include media-max-xl {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-top: 120px;
}
@include media-max-md {
padding-top: 64px;
padding-bottom: 64px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 32px;
}
.content {
max-width: 600px;
@include media-max-xl {
max-width: 100%;
grid-column: unset;
}
}
}
@@ -146,8 +171,23 @@ h2 {
padding-top: 90px;
padding-bottom: 90px;
border-bottom: 1px solid $color-grey;
@include media-max-md {
padding-top: 64px;
padding-bottom: 64px;
}
.grid {
gap: 220px;
@include media-max-xl {
gap: 82px;
}
@include media-max-md {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 32px;
}
}
h3 {
@@ -155,13 +195,33 @@ h2 {
color: $color-primary;
font-size: $h3;
margin-bottom: 32px;
@include media-max-md {
margin-bottom: 16px;
}
}
}
.additional-section {
padding-top: 90px;
@include media-max-xl {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@include media-max-md {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 32px;
padding-top: 64px;
}
.content {
max-width: 600px;
@include media-max-xl {
max-width: 100%;
grid-column: unset;
}
}
}
Loading