diff --git a/index.html b/index.html index d339e6856..e8967d8d1 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -6,14 +7,540 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Creative bakery + + + -

Hello Mate Academy

+ +
+
+
+ + + + + + + +
+ +
+
+ We bake your fantasies — croissants, cakes, cookies, and cupcakes. +
+
+

Creative bakery

+
+ cookie +
+
+
+ + cookie + learn more + +
+
+
+
+ + + + + + +
+
+ +
+

what we bake

+ +

+ We can customize our cookies right for your needs. Just imagine it +

+ +
+
+
+ product-card +
+

Cakes

+

+ Oatmeal cookies with golden raisins, orange zest and chocolate + chips +

+
+ arrow + + order + +
+
+
+
+ product-card +
+

Cakes

+

+ Chocolate biscuit coffee cake topped with a buttercream and + powder +

+
+ arrow + + order + +
+
+
+
+ product-card +
+

Donuts

+

+ Light multi-layered croissant strewn with cinammon and almond + “petals” +

+
+ arrow + + order + +
+
+
+
+ product-card +
+

Donuts

+

+ Light multi-layered croissant strewn with coconut and nuts +

+
+ arrow + + order + +
+
+
+
+ product-card +
+

Cakes

+

+ Cake with chocolate salted caramel, Vanilla frutti pebbles + inside +

+
+ arrow + + order + +
+
+
+
+ product-card +
+

Cookies

+

+ Oatmeal cookies with golden raisins, orange zest and chocolate + chips +

+
+ arrow + + order + +
+
+
+
+ +
+ + + +
+

Few words About us

+ +

+ Like many design teams, Onfido made the transition from Abstract + + Sketch, to Figma in the last couple of years. One of the common + resistance points internally before making that switch, was Figma’s + lack of Git-style branching that Abstract enabled. The design team had + come to rely on branching and had built a lot of our processes around + it. +

+ +
+
+
2015
+
Foundation year
+
+
+
23
+
Stores
+
+
+
155
+
Companies
+
+
+
10к+
+
Clients
+
+ crumbs +
+
+ + + + +
+
+
+ + + +
+

Menu

+ + Products + + + About Us + + + Blog + + + Terms & Privacy + +
+
+
+
+
+ Contact us +
+
+
+
+

Call Us

+ + (629) 555-0129 + + + (603) 555-0123 + + + (704) 555-0127 + +
+ +
+
+
+
+ + facebook + + + instagram + + + twitter + +
+ © Bakerlab 2022 +
+
+
+ + + +
diff --git a/src/images/Bakerlab-logo-white.png b/src/images/Bakerlab-logo-white.png new file mode 100644 index 000000000..8ea91c73c Binary files /dev/null and b/src/images/Bakerlab-logo-white.png differ diff --git a/src/images/Bakerlab-logo.png b/src/images/Bakerlab-logo.png new file mode 100644 index 000000000..b39f9c815 Binary files /dev/null and b/src/images/Bakerlab-logo.png differ diff --git a/src/images/button-icon-cookie--hover.png b/src/images/button-icon-cookie--hover.png new file mode 100644 index 000000000..d79a18e82 Binary files /dev/null and b/src/images/button-icon-cookie--hover.png differ diff --git a/src/images/button-icon-cookie.png b/src/images/button-icon-cookie.png new file mode 100644 index 000000000..ab5301414 Binary files /dev/null and b/src/images/button-icon-cookie.png differ diff --git a/src/images/cookie.png b/src/images/cookie.png new file mode 100644 index 000000000..226cf82d3 Binary files /dev/null and b/src/images/cookie.png differ diff --git a/src/images/crumbs.png b/src/images/crumbs.png new file mode 100644 index 000000000..bc48a0fc9 Binary files /dev/null and b/src/images/crumbs.png differ diff --git a/src/images/icon-arrow.png b/src/images/icon-arrow.png new file mode 100644 index 000000000..892b18c84 Binary files /dev/null and b/src/images/icon-arrow.png differ diff --git a/src/images/icon-close.png b/src/images/icon-close.png new file mode 100644 index 000000000..fad832d89 Binary files /dev/null and b/src/images/icon-close.png differ diff --git a/src/images/icon-facebook.png b/src/images/icon-facebook.png new file mode 100644 index 000000000..2c0df9066 Binary files /dev/null and b/src/images/icon-facebook.png differ diff --git a/src/images/icon-instagram.png b/src/images/icon-instagram.png new file mode 100644 index 000000000..fa93f39ca Binary files /dev/null and b/src/images/icon-instagram.png differ diff --git a/src/images/icon-menu.png b/src/images/icon-menu.png new file mode 100644 index 000000000..df4968dfe Binary files /dev/null and b/src/images/icon-menu.png differ diff --git a/src/images/icon-phone.png b/src/images/icon-phone.png new file mode 100644 index 000000000..76a93d84f Binary files /dev/null and b/src/images/icon-phone.png differ diff --git a/src/images/icon-twitter.png b/src/images/icon-twitter.png new file mode 100644 index 000000000..b98a6fff7 Binary files /dev/null and b/src/images/icon-twitter.png differ diff --git a/src/images/photo-product-1.jpg b/src/images/photo-product-1.jpg new file mode 100644 index 000000000..c5170db8a Binary files /dev/null and b/src/images/photo-product-1.jpg differ diff --git a/src/images/photo-product-2.jpg b/src/images/photo-product-2.jpg new file mode 100644 index 000000000..dbfb42719 Binary files /dev/null and b/src/images/photo-product-2.jpg differ diff --git a/src/images/photo-product-3.jpg b/src/images/photo-product-3.jpg new file mode 100644 index 000000000..395bed0d7 Binary files /dev/null and b/src/images/photo-product-3.jpg differ diff --git a/src/images/photo-product-4.jpg b/src/images/photo-product-4.jpg new file mode 100644 index 000000000..4ec86fd7c Binary files /dev/null and b/src/images/photo-product-4.jpg differ diff --git a/src/images/photo-product-5.jpg b/src/images/photo-product-5.jpg new file mode 100644 index 000000000..9eef1bd28 Binary files /dev/null and b/src/images/photo-product-5.jpg differ diff --git a/src/images/photo-product-6.jpg b/src/images/photo-product-6.jpg new file mode 100644 index 000000000..ac83c2faa Binary files /dev/null and b/src/images/photo-product-6.jpg differ diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..e43f62049 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,143 @@ +.about-us { + position: relative; + overflow: hidden; + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + + --columns: 2; + + gap: 16px; + + @include md { + --columns: 8; + + gap: 24px; + margin-top: 152px; + } + + @include lg { + --columns: 8; + + gap: 24px; + margin-top: 178px; + } + + &__num { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 96px; + line-height: 85%; + letter-spacing: -5%; + color: #f9512e; + margin-bottom: 8px; + } + + &__title { + color: #f9512e; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 48px; + z-index: 122; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + grid-column: 1 / -1; + + @include md { + font-size: 56px; + grid-column: 1 / 5; + } + + @include lg { + font-size: 72px; + grid-column: span 3; + } + } + + &__title-2 { + color: #1c1a26; + margin-top: 24px; + font-size: 16px; + line-height: 150%; + font-family: Inter, sans-serif; + letter-spacing: -1%; + font-weight: 400; + grid-column: 1 / -1; + + @include md { + grid-column: 5 / 9; + margin-top: 0; + } + } + + &-info { + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + + --columns: 2; + + gap: 16px; + + @include md { + --columns: 8; + + gap: 24px; + margin-bottom: 152px; + } + + @include lg { + --columns: 8; + + gap: 24px; + } + + margin-top: 64px; + margin-bottom: 72px; + z-index: 1; + position: relative; + grid-column: 1 / -1; + } + + &__num-2 { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: #1c1a26; + margin-bottom: 48px; + } +} + +.infostat { + grid-column: 1 / -1; + margin-top: 64px; + + @include md { + grid-column: span 4; + margin-top: 72px; + } + + @include lg { + grid-column: span 2; + margin-top: 144px; + } + +} + +.about-us__photo { + position: absolute; + + max-width: 100%; + height: auto; + top: 40%; + z-index: -1; + pointer-events: none; + + @include md { + width: 680px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/src/styles/blocks/blog.scss b/src/styles/blocks/blog.scss new file mode 100644 index 000000000..b7f51e4cc --- /dev/null +++ b/src/styles/blocks/blog.scss @@ -0,0 +1,83 @@ +.blog { + display: flex; + flex-direction: column; + align-items: start; + background-color: #1c1a26; + + @include lg { + margin-top: 56px; + } + + &__wrapper { + display: grid; + width: 100%; + grid-template-columns: repeat(var(--columns), 1fr); + grid-template-rows: repeat(var(--rows), minmax(0, auto)); + gap: 16px; + row-gap: 40px; + margin-top: 56px; + margin-bottom: 56px; + + @include md { + --columns: 8; + + gap: 24px; + row-gap: 48px; + margin-top: 88px; + margin-bottom: 88px; + } + } + + &__logo-link { + display: flex; + height: 40px; + max-width: 168px; + grid-column: 1 / 5; + + } + + &__menu { + display: flex; + flex-direction: column; + gap: 16px; + max-width: 328px; + grid-row: 2; + grid-column: 1 / 5; + } + + &__list { + color: #fff; + text-decoration: none; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + } +} + +.blog-logo { + transition: 0.3s; + + &:hover { + transform: scale(1.1); + } +} + +.logo__wrapper { + grid-column: 1 / -1; + + @include md { + grid-column: 1 / 5; + } +} + +.section-title-8 { + color: #7f8096; + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 000000000..97ddbc050 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,136 @@ +.contact-us { + + &__num { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__contact { + display: flex; + flex-direction: column; + gap: 40px; + grid-column: 1 / -1; + @include md { + grid-column: 5 / -1; + } + } + + &__title { + color: #fff; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + + @include md { + font-size: 58px; + } + + @include lg { + font-size: 72px; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 40px; + + @include lg { + flex-direction: row; + justify-content: space-between; + + & > :nth-child(n) { + width: calc(50% - var(--footer-x-gap) / 2); + } + } + } + + &__email { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__media { + display: flex; + justify-content: space-between; + flex-direction: column; + gap: 40px; + grid-column: 1 / -1; + + @include md { + flex-direction: row; + max-height: 24px; + gap: 24px; + + & > :nth-child(n) { + width: calc(50% - var(--footer-x-gap) / 2); + } + } + } + + &__bakerlab { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + gap: 40px; + + @include md { + grid-column: span calc(var(--columns) / 2); + gap: 96px; + } + + @include lg { + gap: 61px; + } + } + + &__socials { + display: flex; + cursor: pointer; + + &--icon { + width: 24px; + margin-right: 32px; + height: 24px; + transition: 0.3s; + + &:hover { + filter: grayscale(100%) brightness(100); + transform: scale(1.1); + } + } + } + + &__wrapper { + grid-column: 1 / -1; + + @include md { + grid-column: 5 / 9; + } + } + + &__footer { + color: #7f8096; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + } +} + +.contact-us__title-wrapper { + + @include md { + height: 96px; + } + + @include lg { + height: 61px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..ae2c5c098 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,191 @@ +.header { + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__top { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + + @include md { + margin-top: 144px; + margin-bottom: 80px; + justify-content: center; + align-items: center; + } + + @include lg { + margin-top: 0; + } + } +} + +.title-1 { + display: flex; + color: #1c1a26; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + text-align: center; + margin-top: 32px; + + @include md { + margin-top: 80px; + max-width: 280px; + text-align: left; + } + + @include lg { + margin-top: 135px; + text-align: left; + max-width: 260px; + } + + @include xl { + margin-top: 144px; + max-width: 280px; + } +} + + +.header__title { + display: flex; + position: relative; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 64px; + line-height: 85%; + letter-spacing: -5%; + text-align: center; + justify-content: center; + text-transform: uppercase; + color: #f9512e; + width: 100%; + margin-top: 32px; + z-index: 2; + + @include md { + font-size: 80px; + } + + @include lg { + font-size: 136px; + white-space: nowrap; + } + + @include xl { + font-size: 144px; + } +} + +.header-image { + display: flex; + justify-content: center; + align-items: center; + + + &__cookie { + display: block; + max-width: 288px; + + @include md { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 1; + max-width: 326px; + } + + @include lg { + max-width: 100%; + height: 546px; + } + + @include xl { + height: 586px; + } + } +} + +.header__botom { + display: flex; + justify-content: center; + align-items: center; + + @include lg { + justify-content: start; + } +} + +.header__button { + display: flex; + text-decoration: none; + cursor: pointer; + margin-bottom: 40px; + width: 100%; + max-width: 288px; + height: 56px; + border: 2px #f9512e solid; + border-radius: 32px; + background-color: #ffeefc; + color: #f9512e; + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + justify-content: center; + align-items: center; + gap: 4px; + + &-cookie { + width: 20px; + height: 20px; + } + + &:hover { + background-color: #F9512E; + color: #fff; + + .header__button-cookie { + filter: brightness(0) invert(1); + } + } + + &:active { + background-color: #B2341A; + color: #fff; + border-color: #B2341A; + + .header__button-cookie { + filter: brightness(0) invert(1); + } + } + + @include md { + height: 56px; + width: 100%; + max-width: 326px; + margin-top: 80px; + margin-bottom: 228px; + } + + @include lg { + height: 56px; + max-width: 260px; + margin-top: 64px; + } + + @include xl { + max-width: 280px; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..716d88b81 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,45 @@ +.icon { + display: block; + cursor: pointer; + width: 24px; + height: 24px; + background-size: cover; + margin-top: 20px; + margin-bottom: 20px; + + background-image: url(/src/images/icon-menu.png); + transition: 0.3s; + + &:hover { + transform: scale(1.1); + } + + + @include lg { + display: none; + opacity: 0; + pointer-events: none; + } +} + +.icon-close { + background-image: url(/src/images/icon-close.png); + transition: 0.3s; + + &:hover { + transform: scale(1.1); + } +} + +.icon-phone { + display: inline-flex; + display: block; + width: 24px; + height: 24px; +} + +.icon-arrow { + display: block; + width: 24px; + height: 24px; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..71e638aa6 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,42 @@ +.menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + box-sizing: border-box; + background-color: #ffeefc; + height: 100vh; + opacity: 0; + pointer-events: none; + overflow: hidden; + z-index: 99; + + justify-content: center; + align-items: center; + transition: all 0.3s; + transform: translateX(100%); + + &__top { + position: sticky; + top: 0; + z-index: 1; + } +} + +.menu:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; +} + +.menu__nav { + display: flex; + flex-direction: column; + text-align: center; + margin-top: 132px; +} + +.menu:has(.page-menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..921ca1ebd --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,86 @@ +.nav__list { + margin: 0; + padding: 0; + + @include lg { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } +} + +.nav__lg { + opacity: 0; + display: none; + margin-bottom: 28px; + margin-top: 28px; + + + @include lg { + opacity: 1; + display: block; + } +} + +.nav__item { + list-style: none; + margin-bottom: 24px; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + + @include lg { + display: inline-block; + margin-left: 64px; + margin-bottom: 0; + align-items: center; + justify-content: center; + } +} + +.nav__link { + position: relative; + text-decoration: none; + color: #1c1a26; + + &-orange { + text-decoration: none; + font-weight: 500; + text-transform: uppercase; + color: #f9512e; + line-height: 100%; + letter-spacing: 2%; + margin-top: 8px; + } +} + +.nav__link::after { + content: ''; + position: absolute; + width: 100%; + height: 1px; + bottom: 0; + left: 0; + background-color: #1c1a26; + transition: transform 0.3s; + transform: scaleX(0); +} + +.nav__link:hover::after { + transform: scaleX(1); +} + + +.nav-icon-container { + display: inline-flex; + gap: 4px; + cursor: pointer; + transition: 0.3s; + + &:hover { + transform: scale(1.1); + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..e38da5379 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,28 @@ +.top-bar { + display: flex; + justify-content: space-between; + text-align: center; + gap: 16px; + margin-inline: 16px; + + @include lg { + margin-inline: 32px; + } + + &__logo-link { + display: flex; + margin-top: 16px; + margin-bottom: 16px; + height: 32px; + transition: 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include lg { + margin-top: 28px; + margin-bottom: 28px; + } + } +} diff --git a/src/styles/blocks/what-we-bake.scss b/src/styles/blocks/what-we-bake.scss new file mode 100644 index 000000000..7825a329e --- /dev/null +++ b/src/styles/blocks/what-we-bake.scss @@ -0,0 +1,173 @@ +.what-we-bake { + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + + --columns: 2; + + gap: 16px; + margin-bottom: 72px; + + @include md { + --columns: 8; + + gap: 24px; + } + + @include lg { + --columns: 8; + + gap: 24px; + } +} + +.section-title { + color: #f9512e; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + grid-column: 1 / -1; + + @include md { + font-size: 56px; + } + + @include lg { + font-size: 72px; + } + + &-2 { + color: #1c1a26; + margin-top: 24px; + font-size: 16px; + line-height: 150%; + font-family: Inter, sans-serif; + letter-spacing: -1%; + font-weight: 400; + grid-column: 1 / -1; + } + + &-3 { + color: #7f8096; + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + margin-top: 16px; + margin-bottom: 8px; + } +} + +.product-container { + display: grid; + + --columns: 2; + + grid-column: 1 / -1; + + @include md { + grid-template-columns: repeat(2, 1fr); + grid-column: 1 / 9; + gap: 24px; + } + + @include lg { + grid-template-columns: repeat(8, 1fr); + gap: 24px; + + .product:nth-child(1), + .product:nth-child(2) { + grid-column: span 3; + } + + .product:nth-child(3) { + grid-column: span 3; + grid-column-end: 6; + } + + .product:nth-child(4) { + grid-column: span 3; + grid-column-end: 9; + } + + .product:nth-child(5), + .product:nth-child(6) { + grid-column: span 3; + } +} +} + +.product { + position: relative; + max-width: 432px; + + &-card { + display: block; + width: 100%; + height: auto; + transition: 0.3s; + cursor: pointer; + object-fit: cover; + + + &:hover { + transform: scale(1.1); + } + } + + &-arrow { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + color: #f9512e; + text-transform: uppercase; + text-decoration: none; + } +} + +.product-card__wrapper { + width: 100%; + display: block; + object-fit: cover; + line-height: 0; + margin-top: 56px; + overflow: hidden; + + @include md { + margin-top: 80px; + } +} + +.arrow-container { + position: relative; + margin-top: 24px; + width: 84px; + height: 32px; + display: inline-flex; + align-items: center; + gap: 4px; + cursor: pointer; +} + +.arrow-container::after { + content: ''; + position: absolute; + width: 100%; + height: 1px; + bottom: 0; + left: 0; + background-color: #f9512e; + transition: transform 0.3s; + transform: scaleX(0); +} + +.arrow-container:hover::after { + transform: scaleX(1); +} + diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..e471decec 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,33 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import '/src/styles/blocks/header'; +@import '/src/styles/blocks/what-we-bake'; +@import '/src/styles/blocks/about-us'; +@import '/src/styles/blocks/contact-us'; +@import '/src/styles/blocks/blog'; +@import '/src/styles/blocks/menu'; +@import '/src/styles/blocks/icon'; +@import '/src/styles/blocks/nav'; +@import '/src/styles/blocks/top-bar'; + +:root { + --rows: 2; + --footer-x-gap: 24px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} body { background: $c-gray; + scroll-behavior: smooth; + background-color: #ffeefc; +} + +body:has(.menu:target) { + overflow: hidden; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f6b5457af 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,44 @@ #{$_property}: $_toValue; } } + +@mixin md { + @media (min-width: 640px) { + @content; + } +} + +@mixin lg { + @media (min-width: 1200px) { + @content; + } +} + +@mixin xl { + @media (min-width: 1440px) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 16px; + + @include md { + padding-inline: 44px; + } + + @include lg { + margin-inline: auto; + padding-inline: 44px; + } + + @include xl { + margin-inline: auto; + padding-inline: 124px; + } +} + +.container { + @include content-padding-inline; +} +