diff --git a/package.json b/package.json index ad27d3a..6cc097c 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@typescript-eslint/parser": "^5.31.0", "browserslist": "^4.21.3", "cssnano": "^5.1.12", - "eslint": "^8.20.0", + "eslint": "^8.21.0", "eslint-plugin-svelte3": "^4.0.0", "postcss": "^8.4.14", "postcss-focus-visible": "^7.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7da684c..2de6ac1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,7 +14,7 @@ specifiers: cssnano: ^5.1.12 dayjs: ^1.11.4 embla-carousel: ^6.2.0 - eslint: ^8.20.0 + eslint: ^8.21.0 eslint-plugin-svelte3: ^4.0.0 focus-visible: ^5.2.0 ogl: ^0.0.97 @@ -50,12 +50,12 @@ devDependencies: '@sveltejs/adapter-vercel': 1.0.0-next.66 '@sveltejs/kit': 1.0.0-next.401_svelte@3.49.0+vite@3.0.4 '@types/animejs': 3.1.5 - '@typescript-eslint/eslint-plugin': 5.31.0_d5zwcxr4bwkhmuo464cb3a2puu - '@typescript-eslint/parser': 5.31.0_he2ccbldppg44uulnyq4rwocfa + '@typescript-eslint/eslint-plugin': 5.31.0_jnss7dz76sznncvpyatba5hbxa + '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq browserslist: 4.21.3 cssnano: 5.1.12_postcss@8.4.14 - eslint: 8.20.0 - eslint-plugin-svelte3: 4.0.0_piwa6j2njmnknm35bh3wz5v52y + eslint: 8.21.0 + eslint-plugin-svelte3: 4.0.0_a7wk4ghvg4hia4trwaglu7p6cq postcss: 8.4.14 postcss-focus-visible: 7.1.0_postcss@8.4.14 postcss-normalize: 10.0.1_bujjonwylnebbx3cl7qckr3eti @@ -232,8 +232,8 @@ packages: - supports-color dev: true - /@humanwhocodes/config-array/0.9.5: - resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==} + /@humanwhocodes/config-array/0.10.4: + resolution: {integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==} engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 1.2.1 @@ -243,6 +243,10 @@ packages: - supports-color dev: true + /@humanwhocodes/gitignore-to-minimatch/1.0.2: + resolution: {integrity: sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==} + dev: true + /@humanwhocodes/object-schema/1.2.1: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true @@ -435,7 +439,7 @@ packages: '@types/node': 18.6.3 dev: true - /@typescript-eslint/eslint-plugin/5.31.0_d5zwcxr4bwkhmuo464cb3a2puu: + /@typescript-eslint/eslint-plugin/5.31.0_jnss7dz76sznncvpyatba5hbxa: resolution: {integrity: sha512-VKW4JPHzG5yhYQrQ1AzXgVgX8ZAJEvCz0QI6mLRX4tf7rnFfh5D8SKm0Pq6w5PyNfAWJk6sv313+nEt3ohWMBQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -446,12 +450,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': 5.31.0_he2ccbldppg44uulnyq4rwocfa + '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq '@typescript-eslint/scope-manager': 5.31.0 - '@typescript-eslint/type-utils': 5.31.0_he2ccbldppg44uulnyq4rwocfa - '@typescript-eslint/utils': 5.31.0_he2ccbldppg44uulnyq4rwocfa + '@typescript-eslint/type-utils': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq + '@typescript-eslint/utils': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq debug: 4.3.4 - eslint: 8.20.0 + eslint: 8.21.0 functional-red-black-tree: 1.0.1 ignore: 5.2.0 regexpp: 3.2.0 @@ -462,7 +466,7 @@ packages: - supports-color dev: true - /@typescript-eslint/parser/5.31.0_he2ccbldppg44uulnyq4rwocfa: + /@typescript-eslint/parser/5.31.0_qugx7qdu5zevzvxaiqyxfiwquq: resolution: {integrity: sha512-UStjQiZ9OFTFReTrN+iGrC6O/ko9LVDhreEK5S3edmXgR396JGq7CoX2TWIptqt/ESzU2iRKXAHfSF2WJFcWHw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -476,7 +480,7 @@ packages: '@typescript-eslint/types': 5.31.0 '@typescript-eslint/typescript-estree': 5.31.0_typescript@4.7.4 debug: 4.3.4 - eslint: 8.20.0 + eslint: 8.21.0 typescript: 4.7.4 transitivePeerDependencies: - supports-color @@ -490,7 +494,7 @@ packages: '@typescript-eslint/visitor-keys': 5.31.0 dev: true - /@typescript-eslint/type-utils/5.31.0_he2ccbldppg44uulnyq4rwocfa: + /@typescript-eslint/type-utils/5.31.0_qugx7qdu5zevzvxaiqyxfiwquq: resolution: {integrity: sha512-7ZYqFbvEvYXFn9ax02GsPcEOmuWNg+14HIf4q+oUuLnMbpJ6eHAivCg7tZMVwzrIuzX3QCeAOqKoyMZCv5xe+w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -500,9 +504,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/utils': 5.31.0_he2ccbldppg44uulnyq4rwocfa + '@typescript-eslint/utils': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq debug: 4.3.4 - eslint: 8.20.0 + eslint: 8.21.0 tsutils: 3.21.0_typescript@4.7.4 typescript: 4.7.4 transitivePeerDependencies: @@ -535,7 +539,7 @@ packages: - supports-color dev: true - /@typescript-eslint/utils/5.31.0_he2ccbldppg44uulnyq4rwocfa: + /@typescript-eslint/utils/5.31.0_qugx7qdu5zevzvxaiqyxfiwquq: resolution: {integrity: sha512-kcVPdQS6VIpVTQ7QnGNKMFtdJdvnStkqS5LeALr4rcwx11G6OWb2HB17NMPnlRHvaZP38hL9iK8DdE9Fne7NYg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -545,9 +549,9 @@ packages: '@typescript-eslint/scope-manager': 5.31.0 '@typescript-eslint/types': 5.31.0 '@typescript-eslint/typescript-estree': 5.31.0_typescript@4.7.4 - eslint: 8.20.0 + eslint: 8.21.0 eslint-scope: 5.1.1 - eslint-utils: 3.0.0_eslint@8.20.0 + eslint-utils: 3.0.0_eslint@8.21.0 transitivePeerDependencies: - supports-color - typescript @@ -1276,13 +1280,13 @@ packages: engines: {node: '>=10'} dev: true - /eslint-plugin-svelte3/4.0.0_piwa6j2njmnknm35bh3wz5v52y: + /eslint-plugin-svelte3/4.0.0_a7wk4ghvg4hia4trwaglu7p6cq: resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==} peerDependencies: eslint: '>=8.0.0' svelte: ^3.2.0 dependencies: - eslint: 8.20.0 + eslint: 8.21.0 svelte: 3.49.0 dev: true @@ -1302,13 +1306,13 @@ packages: estraverse: 5.3.0 dev: true - /eslint-utils/3.0.0_eslint@8.20.0: + /eslint-utils/3.0.0_eslint@8.21.0: resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} peerDependencies: eslint: '>=5' dependencies: - eslint: 8.20.0 + eslint: 8.21.0 eslint-visitor-keys: 2.1.0 dev: true @@ -1322,13 +1326,14 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint/8.20.0: - resolution: {integrity: sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==} + /eslint/8.21.0: + resolution: {integrity: sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: '@eslint/eslintrc': 1.3.0 - '@humanwhocodes/config-array': 0.9.5 + '@humanwhocodes/config-array': 0.10.4 + '@humanwhocodes/gitignore-to-minimatch': 1.0.2 ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 @@ -1336,16 +1341,19 @@ packages: doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.1.1 - eslint-utils: 3.0.0_eslint@8.20.0 + eslint-utils: 3.0.0_eslint@8.21.0 eslint-visitor-keys: 3.3.0 espree: 9.3.3 esquery: 1.4.0 esutils: 2.0.3 fast-deep-equal: 3.1.3 file-entry-cache: 6.0.1 + find-up: 5.0.0 functional-red-black-tree: 1.0.1 glob-parent: 6.0.2 globals: 13.17.0 + globby: 11.1.0 + grapheme-splitter: 1.0.4 ignore: 5.2.0 import-fresh: 3.3.0 imurmurhash: 0.1.4 @@ -1459,6 +1467,14 @@ packages: to-regex-range: 5.0.1 dev: true + /find-up/5.0.0: + resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} + engines: {node: '>=10'} + dependencies: + locate-path: 6.0.0 + path-exists: 4.0.0 + dev: true + /flat-cache/3.0.4: resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -1577,6 +1593,10 @@ packages: resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} dev: true + /grapheme-splitter/1.0.4: + resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==} + dev: true + /has-flag/4.0.0: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} @@ -1712,6 +1732,13 @@ packages: engines: {node: '>=10'} dev: true + /locate-path/6.0.0: + resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} + engines: {node: '>=10'} + dependencies: + p-locate: 5.0.0 + dev: true + /lodash.memoize/4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} dev: true @@ -1921,6 +1948,20 @@ packages: word-wrap: 1.2.3 dev: true + /p-limit/3.1.0: + resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} + engines: {node: '>=10'} + dependencies: + yocto-queue: 0.1.0 + dev: true + + /p-locate/5.0.0: + resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} + engines: {node: '>=10'} + dependencies: + p-limit: 3.1.0 + dev: true + /parent-module/1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -1928,6 +1969,11 @@ packages: callsites: 3.1.0 dev: true + /path-exists/4.0.0: + resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} + engines: {node: '>=8'} + dev: true + /path-is-absolute/1.0.1: resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} @@ -3214,3 +3260,8 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} dev: true + + /yocto-queue/0.1.0: + resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} + engines: {node: '>=10'} + dev: true diff --git a/src/components/atoms/AboutGridPhoto.svelte b/src/components/atoms/AboutGridPhoto.svelte new file mode 100644 index 0000000..336043b --- /dev/null +++ b/src/components/atoms/AboutGridPhoto.svelte @@ -0,0 +1,43 @@ + + +
+ +
\ No newline at end of file diff --git a/src/routes/about.svelte b/src/routes/about.svelte new file mode 100644 index 0000000..5eb741b --- /dev/null +++ b/src/routes/about.svelte @@ -0,0 +1,142 @@ + + + + + + + + + + + + +
+
+
+ {@html data.purpose_text} +
+ +
+
+
+ +
+
+

{data.process_title}

+

{data.process_subtitle}

+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ {#each photos as { image: { id }, title }, index} + + {/each} +
+
+
+ +
+
+

{data.contact_title}

+ +
+ {#each data.contact_blocks as { title, text, link, button }} +
+

{title}

+

{text}

+ {#if link} +
+ {/each} +
+
+ +
+
+ + +
+
+
+ \ No newline at end of file diff --git a/src/routes/about.ts b/src/routes/about.ts new file mode 100644 index 0000000..6680915 --- /dev/null +++ b/src/routes/about.ts @@ -0,0 +1,85 @@ +import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit' +import { fetchAPI } from '$utils/api' +import { getRandomItems } from '$utils/functions' + +export async function GET ({}: RequestEvent): Promise { + try { + // Get data and total of published photos + const res = await fetchAPI(` + query { + photos: photo ( + filter: { + favorite: { _eq: true }, + status: { _eq: "published" }, + }, + limit: -1, + ) { + id + } + + about { + description + intro_firstphoto { + id + title + } + intro_portraits { + id + title + } + intro_text + intro_firstlocation { + slug + country { + flag { id } + slug + } + } + + purpose_text + + process_title + process_subtitle + + contact_title + contact_blocks + } + } + `) + const { data: { about, photos: photosIds }} = res + + // Get random photos + const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id) + + // Query these random photos from IDs + const photosRes = await fetchAPI(` + query { + photo (filter: { id: { _in: [${randomPhotosIds}] }}) { + id + title + slug + image { + id + title + } + } + } + `) + + const { data: { photo: photos }} = photosRes + + console.log(about) + + return { + body: { + data: about, + photos, + } + } + } catch (error) { + return { + status: 404, + body: error, + } + } +} \ No newline at end of file diff --git a/src/style/_typography.scss b/src/style/_typography.scss index 9853a6a..a94f66b 100644 --- a/src/style/_typography.scss +++ b/src/style/_typography.scss @@ -43,6 +43,18 @@ } } +// X-Large +.title-xl { + font-family: $font-serif; + font-size: rem(34px); + line-height: 1.2; + letter-spacing: -0.025em; + + @include bp (sm) { + font-size: clamp(#{rem(34px)}, 4vw, #{rem(60px)}); + } +} + // Big .title-big { font-family: $font-serif; diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss index 7aa553e..e90ac19 100644 --- a/src/style/atoms/_button.scss +++ b/src/style/atoms/_button.scss @@ -60,6 +60,7 @@ &--small { height: 40px; padding: 0 16px; + font-size: rem(16px); @include bp (md) { height: 40px; diff --git a/src/style/molecules/_heading.scss b/src/style/molecules/_heading.scss index 7866279..cd5bb72 100644 --- a/src/style/molecules/_heading.scss +++ b/src/style/molecules/_heading.scss @@ -28,5 +28,21 @@ max-width: 600px; margin-top: 72px; } + + :global(a) { + position: relative; + color: currentColor; + text-decoration: none; + display: inline-block; + background-image: linear-gradient(rgba($color-tertiary, 0.3), rgba($color-tertiary, 0.3)); + background-position: 0 100%; + background-size: 100% 1px; + background-repeat: no-repeat; + transition: color 0.6s var(--ease-quart); + + &:hover { + color: $color-secondary-light; + } + } } } \ No newline at end of file diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss new file mode 100644 index 0000000..3cb21b6 --- /dev/null +++ b/src/style/pages/_about.scss @@ -0,0 +1,272 @@ +.about { + /* + ** Purpose + */ + &__purpose { + text-align: center; + + .container-wide { + position: relative; + display: flex; + align-items: center; + overflow: hidden; + justify-content: center; + min-height: calc(100vh - var(--sides)); + color: #fff; + padding: 0 8%; + box-shadow: inset 0 0 0 2px $color-primary-tertiary20; + border-radius: 16px; + + @include bp (sm) { + padding: 0 18%; + } + } + + // Text + .text { + max-width: 1024px; + + :global(strong) { + color: $color-secondary-light; + font-weight: inherit; + } + } + + // Background + .background { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background-color: $color-primary-tertiary20; + transition: opacity 1.2s var(--ease-quart); + } + + + // Visible state + &:global(.is-visible) { + .background { + opacity: 1; + } + } + } + + + /* + ** Process + */ + &__process { + @include bp (sm) { + margin: 128px 0 0; + } + + .title { + max-width: 400px; + margin: 0 auto 48px; + padding: 0 16px; + text-align: center; + + @include bp (sm) { + margin-bottom: 80px; + } + + h2 { + margin-bottom: 24px; + color: $color-secondary; + } + p { + color: $color-tertiary; + font-weight: 300; + } + } + + .steps { + display: grid; + gap: 8px; + + @include bp (sm) { + grid-template-columns: repeat(16, 1fr); + gap: 12px; + } + + div { + background: $color-primary-darker; + border-radius: 8px; + height: 600px; + + @include bp (sm) { + border-radius: 16px; + } + + &:nth-child(1) { + grid-column: span 10; + } + &:nth-child(2) { + grid-column: span 6; + } + &:nth-child(3) { + grid-column: span 6; + } + &:nth-child(4) { + grid-column: span 10; + } + &:nth-child(5) { + grid-column: span 8; + } + &:nth-child(6) { + grid-column: span 8; + } + } + } + } + + + /* + ** Photos grid + */ + &__photos { + position: relative; + z-index: 1; + margin-top: 48px; + + @include bp (sm) { + margin-top: 80px; + } + + .container-wide { + overflow: hidden; + border-radius: 8px; + } + + .photos-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 12px; + margin: -5% -5% 0; + transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0); + transition: transform 0.8s var(--ease-quart); + } + + :global(picture) { + width: 100%; + height: auto; + border-radius: 8px; + overflow: hidden; + cursor: pointer; + transition: opacity 1s var(--ease-quart); + + :global(img) { + display: block; + width: 100%; + height: auto; + user-select: none; + pointer-events: none; + } + } + + $opacity-off: 0.2; + + // States + :global(.is-disabled) { + opacity: $opacity-off; + } + :global(.is-hovered picture) { + opacity: 1; + } + :global(.is-hovered picture:not(.is-disabled)) { + opacity: $opacity-off; + } + + // Mask + &:before { + content: ""; + display: block; + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 20vw; + background: linear-gradient(to top, rgba($color-primary, 0), $color-primary); + pointer-events: none; + } + &:after { + content: ""; + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 30vw; + background: linear-gradient(to top, $color-primary, rgba($color-primary, 0)); + pointer-events: none; + } + } + + + /* + ** Bottom + */ + &__bottom { + @include bp (sm) { + margin-top: calc(-1 * clamp(160px, 14vw, 240px)); + } + + // Modules + .grid-modules { + @include bp (sm) { + grid-column: 2 / span calc(var(--columns) - 2); + } + } + } + + // Interest + &__interest { + position: relative; + z-index: 2; + background: $color-primary-tertiary20; + border-radius: 12px; + box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8); + + @include bp (sm) { + grid-column: 2 / span calc(var(--columns) - 2); + margin-bottom: 48px; + padding: 120px 0; + } + + h2 { + grid-column: span var(--columns); + margin-bottom: 56px; + color: #fff; + text-align: center; + + @include bp (sm) { + margin-bottom: 88px; + } + } + .blocks { + @include bp (sm) { + grid-column: 4 / span calc(var(--columns) - 6); + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 11.5%; + } + } + .block { + text-align: center; + + h3 { + margin-bottom: 12px; + color: $color-secondary-light; + font-weight: 600; + } + p { + margin-bottom: 32px; + font-weight: 300; + } + } + } +} \ No newline at end of file diff --git a/src/style/tools/_helpers.scss b/src/style/tools/_helpers.scss index 11d1a8d..6707ac7 100644 --- a/src/style/tools/_helpers.scss +++ b/src/style/tools/_helpers.scss @@ -17,4 +17,16 @@ @include bp (sm) { padding: 0; } +} + +// Wide wrap (close to sides) +.container-wide { + --sides: 16px; + width: calc(100% - var(--sides)); + max-width: var(--container-width); + margin: 0 auto; + + @include bp (sm) { + --sides: 24px; + } } \ No newline at end of file