html, body {
height: 100%;
background: #393939;
}
body {
display: flex;
flex-direction: column;
color: #E0DFDB;
min-height: 100vh;
font-size: 14px;
font-family: "Roboto Mono";
overflow-x: hidden;
}
#page {
display: flex;
flex-direction: column;
flex: 1;
min-height: 100vh;
}
.site-main {
flex: 1;
}
main, .post, .page, .page-content, .entry-content, .entry-summary {
margin: 0 auto;
}
a,
a:visited,
a:focus,
a:active {
color: #E0DFDB;
outline: none;
box-shadow: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.header {
display: flex;
height: 80px;
width: 100%;
}
.header__wrapper {
display: flex;
width: 100%;
margin: 0 auto;
max-width: 1280px;
padding: 0 32px;
align-items: center;
justify-content: space-between;
}
@media (max-width: 768px) {
.header {
height: 60px;
}
.header__wrapper {
max-width: 100%;
padding: 16px;
}
}
.header__logo {
display: flex;
justify-content: flex-start;
max-height: 80px;
z-index: 99;
}
.header__logo svg {
width: 100%;
max-width: 210px;
height: auto;
fill: #E0DFDB;
color: #E0DFDB;
cursor: pointer;
}
.header__right {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 40px;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.header__right {
flex-direction: row-reverse;
}
}
.header__social {
display: flex;
align-items: center;
justify-content: flex-end;
width: 24px;
height: auto;
}
.header__right .header__social svg {
display: flex;
width: 23px;
height: 23px;
color: #E0DFDB;
}
@media (max-width: 768px) {
.header__logo {
width: 100%;
max-height: 60px;
}
.header__logo svg {
max-width: 170px;
}
}
.main-navigation {
display: flex;
justify-content: flex-end;
width: auto;
gap: 24px;
} .header__menu {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
background: none;
padding: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
font: inherit;
color: inherit;
line-height: inherit;
text-align: inherit;
cursor: pointer;
display: none;
justify-content: flex-end;
align-items: center;
gap: 14px;
transition: all 0.3s ease-out;
z-index: 99;
background-color: transparent;
padding: 10px;
}
.header__menu span {
display: flex;
font-family: "Inter", sans-serif;
font-weight: 500;
color: #E0DFDB;
text-transform: uppercase;
font-size: 15px;
}
.header__menu span.menu-icon {
width: 100%;
display: flex;
flex-direction: column;
line-height: 30px;
}
.nav-desktop {
display: flex;
align-items: center;
justify-content: flex-end;
font-family: "Inter", sans-serif;
justify-content: flex-end;
width: 100%;
}
.nav-desktop ul {
display: flex;
list-style: none;
width: 100%;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
gap: 10px;
}
.nav-desktop ul li {
flex: 1;
text-align: center;
padding: 10px;
font-size: 14px;
letter-spacing: 1.3px;
}
.nav-desktop ul li a {
color: #E0DFDB;
transition: all 0.2s linear;
text-decoration: none;
text-transform: uppercase;
}
.nav-desktop ul li a:hover {
color: #fff;
}
.menu-header-menu-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-desktop .menu {
display: flex;
align-items: center;
}
.nav-desktop .menu > li {
display: flex;
align-items: center;
position: relative;
}
.nav-desktop .menu > li:not(:last-child) {
margin-right: 0;
}
.nav-desktop .menu > li:not(:last-child)::after {
content: "";
position: absolute;
right: -9px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.35);
} @media (max-width: 768px) {
ul.menu {
display: flex;
flex-direction: column;
width: 100%;
padding: 16px;
}
ul.menu li {
display: flex;
flex-direction: column;
}
.menu li a {
width: 100%;
text-decoration: none;
padding: 10px 14px;
border-bottom: 1px solid #A5A5A5;
}
}
.menu-icon {
height: 30px;
width: 30px;
position: relative;
z-index: 2;
cursor: pointer;
display: block;
}
.menu-icon__line {
height: 2px;
width: 30px;
display: block;
background-color: #E0DFDB;
margin-bottom: 7px;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.5s ease;
}
.menu-icon__line-left {
width: 16.5px;
margin-top: 5px;
transition: all 200ms linear;
}
.menu-icon__line-right {
width: 16.5px;
float: right;
transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left {
width: 30px;
}
.menu-icon:hover .menu-icon__line-right {
width: 30px;
}
.nav {
display: none;
position: fixed;
top: 64px;
left: 0;
width: 100%;
z-index: 98;
}
.nav:after {
content: "";
position: fixed;
width: 100%;
height: auto;
left: 0;
top: 0;
background: transparent;
border-bottom-left-radius: 400%;
z-index: -1;
transition: all 0.4s linear, border-radius linear 0.4s;
transform: translateX(0%) translateY(-100%);
}
.nav:after {
background: #454545;
transition-delay: 0s;
width: 100%;
transform: translateX(0%) translateY(-100%);
}
.nav__content {
position: fixed;
visibility: hidden;
top: 0;
left: 0;
height: auto;
margin-top: 60px;
padding-bottom: 40px;
width: 100%;
text-align: center;
}
.nav__list {
position: relative;
padding: 0;
margin: 0;
z-index: 2;
}
.nav__list-item {
position: relative;
display: block;
transition-delay: 0.4s;
opacity: 0;
text-align: center;
color: #E0DFDB;
overflow: hidden;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 2px;
transform: none;
transition: opacity 0.2s ease;
margin-bottom: 0;
}
.nav__list-item a {
position: relative;
text-decoration: none;
color: #E0DFDB;
overflow: hidden;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
font-weight: 500;
z-index: 2;
display: inline-block;
text-transform: uppercase;
transition: all 100ms linear;
}
.nav__list-item a:hover {
color: #E0DFDB;
}
.nav__list-item a.active-nav a {
color: #E0DFDB;
}
.nav__list-item a.active-nav a:after {
height: 4px;
opacity: 1;
left: 24px;
width: 100%;
}
body.nav-active {
overflow: hidden;
}
body.nav-active .nav__content {
visibility: visible;
overflow-y: scroll;
background-color: #454545;
}
body.nav-active .menu-icon__line {
background-color: #E0DFDB;
transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
width: 15px;
transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 15px;
float: right;
transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left {
width: 15px;
}
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 15px;
}
body.nav-active .nav {
display: flex;
flex-direction: column;
visibility: visible;
}
body.nav-active .nav:after {
transform: translateX(0%) translateY(0%);
border-radius: 0;
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
transition: opacity 0.2s ease, transform 0.3s ease, color 0.3s ease;
transform: translateX(0%);
}
body.nav-active .nav__list-item:nth-child(1) {
transition-delay: 0.4s;
}
body.nav-active .nav__list-item:nth-child(2) {
transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(3) {
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(4) {
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(5) {
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(6) {
transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(7) {
transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
transition-delay: 1.7s;
}
body:not(.nav-active).nav__list-item {
transition: opacity 0.2s ease;
transition: opacity 0.2s ease, transform 0.3s ease, color 0.3s ease;
transform: translateX(0%);
}
@media (max-width: 768px) {
.nav-desktop {
display: none;
}
.header__menu {
display: flex;
}
.header__menu ul {
display: flex;
gap: 40px;
list-style: none;
line-height: 1.5;
}
.header__menu ul li a {
color: #E0DFDB;
transition: 0.2s linear;
cursor: pointer;
outline: none;
text-decoration: none;
}
.header__menu ul li a:hover {
color: #fff;
}
.header__menu-column {
display: flex;
flex-direction: row;
}
} .menu-item-has-children {
position: relative;
}
.menu-item-has-children > .menu-item-wrapper {
display: inline-flex;
align-items: center;
width: auto;
position: relative;
gap: 8px;
}
.menu-item-has-children > .menu-item-wrapper > a {
flex: none;
}
.menu-item-has-children > ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu-item-has-children.active > .menu-item-wrapper .submenu-toggle {
transform: rotate(180deg);
}
.submenu-toggle {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: transform 0.25s ease;
}
.submenu-toggle svg {
width: 10px;
height: 6px;
} .nav-desktop ul.menu {
display: flex;
align-items: center;
gap: 18px;
}
.nav-desktop ul.menu > li {
position: relative;
justify-content: flex-start;
}
.nav-desktop .menu-item-wrapper {
position: relative;
}
.nav-desktop ul.menu > li > .menu-item-wrapper > a {
padding: 12px 0;
position: relative;
}
.nav-desktop ul.menu .sub-menu {
width: 220px;
padding: 10px 0 0 0px;
position: fixed;
left: auto;
top: 60px;
}
.nav-desktop ul.menu .sub-menu li {
display: block;
padding: 6px 0;
font-size: 13px;
letter-spacing: 1.5px;
}
.nav-desktop ul.menu .sub-menu a {
display: block;
text-align: left;
text-decoration: none;
} @media (max-width: 768px) {
ul.menu {
display: flex;
flex-direction: column;
}
ul.menu > li {
width: 100%;
}
.menu-item-wrapper {
display: flex;
align-items: center;
width: 100%;
}
.menu-item-wrapper > a {
flex: 1;
padding: 14px 0;
border-bottom: none;
}
.submenu-toggle {
border-bottom: none;
position: absolute;
right: 0;
}
.sub-menu {
width: 100%;
padding-left: 20px;
}
.sub-menu li {
display: block;
}
.sub-menu a {
display: block;
padding: 12px 0;
border-bottom: 1px solid rgba(165, 165, 165, 0.35);
}
}
.sub-menu li a {
border-bottom: none;
}
.menu-item-has-children > ul {
padding: 0;
margin-top: 18px;
} .footer {
width: 100%;
position: relative;
display: flex;
background: #454545;
font-family: "Inter", sans-serif;
}
.footer__wrapper {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1280px;
align-items: center;
justify-content: center;
margin: 0 auto;
padding: 60px 32px 60px;
gap: 40px;
}
.footer__nav.nav-desktop {
display: flex;
justify-content: center;
}
.footer-info {
display: flex;
width: 100%;
flex-direction: column;
gap: 14px;
}
.footer-info p {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
font-size: 13px;
line-height: 22px;
letter-spacing: 1px;
margin: 0 auto;
}
.footer-info a {
display: flex;
margin: 0 5px;
text-decoration: none;
}
.footer-info span {
display: flex;
margin: 0 5px 0 0;
}
.development {
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
letter-spacing: 1px;
}
.development a {
display: flex;
margin-left: 5px;
text-decoration: underline;
}
@media (max-width: 768px) {
.footer__wrapper {
max-width: 100%;
padding: 60px 32px 60px;
gap: 40px;
}
.footer__nav.nav-desktop {
display: flex;
justify-content: center;
}
.footer__nav.nav-desktop ul.menu {
gap: 0px;
}
.footer__nav.nav-desktop .menu > li {
padding: 0;
font-size: 13px;
}
.footer__nav.nav-desktop .menu > li:not(:last-child)::after {
display: none;
}
} .project {
padding: 32px 0 140px;
}
.project .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}   .project__breadcrumbs {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
font-size: 12px;
line-height: 1.4;
}
.project__breadcrumbs a {
color: #E0DFDB;
text-decoration: none;
transition: 0.3s;
}
.project__breadcrumbs a:hover {
opacity: 0.6;
}
.project__breadcrumbs span {
color: #A5A5A5;
}   .project__hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 80px;
margin-bottom: 180px;
}
.liner {
display: flex;
position: relative;
justify-content: center;
align-items: flex-start;
height: 80px;
width: 1px;
background-color: #A5A5A5;
margin: 48px 0 32px;
}
.project__hero-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 34%;
position: sticky;
top: 120px;
}
.project__date {
margin-bottom: 24px;
font-size: 16px;
line-height: 1.5;
color: #A5A5A5;
}
.project__title {
margin: 0;
font-family: "Playfair Display", "Inter", sans-serif;
font-weight: 400;
color: #E0DFDB;
font-size: 48px;
line-height: 1.05;
letter-spacing: 0;
}
.project__hero-image {
width: 58%;
}
.project__hero-image img {
display: block;
width: 100%;
height: auto;
}   .project__story {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 80px;
margin-top: 180px;
}
.project__story-content {
max-width: 500px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-top: 280px;
}
.project__story-title {
margin: 0 0 48px;
font-family: "Playfair Display", "Inter", sans-serif;
color: #E0DFDB;
font-size: 48px;
line-height: 1.08;
font-weight: 400;
letter-spacing: 0px;
max-width: 450px;
}
.right-block {
display: flex;
flex-direction: column;
}
.project__story-text {
max-width: 440px;
margin: 0 0 280px;
}
.project__story-text p {
font-family: "Roboto Mono";
color: #A5A5A5;
font-size: 15px;
line-height: 24px;
font-weight: 400;
}
.project__story-text p:last-child {
margin-bottom: 0;
}   .project__media {
margin-bottom: 180px;
}
.project__media img {
display: flex;
width: 100%;
height: auto;
}
.project__media img,
.project__hero-image img,
.project__gallery img {
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
} .project__media--small {
max-width: 400px;
}
.project__media--small img {
max-height: 500px;
-o-object-fit: cover;
object-fit: cover;
}
.project__media--medium {
max-width: 730px;
}
.project__media--medium img {
max-height: 980px;
-o-object-fit: cover;
object-fit: cover;
}
.project__media--large {
width: 100%;
} .project__media--left {
margin-right: auto;
}
.project__media--center {
margin-left: auto;
margin-right: auto;
}
.project__media--right {
margin-left: auto;
} .project__gallery {
display: flex;
gap: 32px;
margin: 120px 0 220px;
}
.project__gallery img {
display: block;
width: 100%;
height: auto;
}
.project__gallery-item {
flex: 1;
} .project__gallery--30-70 .project__gallery-item:first-child {
flex: 0.7;
}
.project__gallery--30-70 .project__gallery-item:last-child {
flex: 1.3;
} .project__gallery--70-30 .project__gallery-item:first-child {
flex: 1.3;
}
.project__gallery--70-30 .project__gallery-item:last-child {
flex: 0.7;
} .project__gallery--equal .project__gallery-item {
flex: 1;
}
.project__gallery {
display: flex;
align-items: center;
gap: 140px;
margin: 120px 0 220px;
}
.project__gallery-item {
flex: 1;
}
.project__gallery-item img {
display: block;
width: 100%;
height: auto;
}
.project__text-block {
max-width: 440px;
margin: 0 auto 180px;
}
.project__text-block p {
margin: 0 0 24px;
font-size: 15px;
line-height: 24px;
color: #A5A5A5;
}
.project__text-block p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.project__gallery {
flex-direction: column;
gap: 24px;
}
.project {
width: 100%;
padding: 60px 0 80px;
}
.project .container {
max-width: 100%;
padding: 0 32px;
}
.project__breadcrumbs {
display: none;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
font-size: 12px;
line-height: 1.4;
}
.project__breadcrumbs a {
color: #E0DFDB;
text-decoration: none;
transition: 0.3s;
}
.project__breadcrumbs a:hover {
opacity: 0.6;
}
.project__breadcrumbs span {
color: #A5A5A5;
}
.project__hero {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
align-items: center;
gap: 0px;
margin-bottom: 80px;
}
.liner {
height: 60px;
margin: 40px 0 32px;
}
.project__hero-info {
width: 100%;
flex-direction: column;
position: relative;
top: 0px;
}
.project__date {
display: none;
margin-bottom: 24px;
font-size: 12px;
}
.project__title {
color: #E0DFDB;
font-size: 28px;
line-height: 34px;
letter-spacing: 0;
}
.project__hero-image {
width: 100%;
}
.project__hero-image img {
display: block;
width: 100%;
height: auto;
}
.project__story {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 80px;
margin-top: 0px;
}
.project__story-content {
max-width: 100%;
display: flex;
flex-direction: column;
margin-top: 32px;
}
.project__story-title {
margin: 0 0 32px;
font-size: 34px;
line-height: 42px;
font-weight: 400;
letter-spacing: 0px;
max-width: 300px;
}
.right-block {
display: flex;
flex-direction: column;
gap: 80px;
}
.project__story-text {
max-width: 100%;
margin: 0 0 80px;
}
.project__story-text p {
font-size: 14px;
line-height: 24px;
}
.project__story-text p:last-child {
margin-bottom: 0;
}
.project__media {
margin-bottom: 0px;
}
.project__media img {
display: flex;
width: 100%;
height: auto;
}
.project__media img,
.project__hero-image img,
.project__gallery img {
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.project__media--small {
max-width: 220px;
margin: 0 auto;
}
.project__media--small img {
width: 100%;
height: 100%;
max-height: 290px;
-o-object-fit: cover;
object-fit: cover;
}
.project__media--medium {
max-width: 100%;
}
.project__media--medium img {
max-height: 980px;
-o-object-fit: cover;
object-fit: cover;
}
.project__media--large {
width: 100%;
} .project__media--left {
margin-right: auto;
}
.project__media--center {
margin-left: auto;
margin-right: auto;
margin: 80px auto 80px;
}
.project__media--right {
margin-left: auto;
}
.gallery-reverse {
flex-direction: column-reverse;
} .project__gallery {
display: flex;
gap: 80px;
margin: 20px 0 80px;
}
.project__gallery img {
display: block;
width: 100%;
height: auto;
}
.project__gallery-item {
flex: 1;
} .project__gallery--30-70 .project__gallery-item:first-child {
flex: 0.7;
}
.project__gallery--30-70 .project__gallery-item:last-child {
flex: 1.3;
} .project__gallery--70-30 .project__gallery-item:first-child {
flex: 1.3;
}
.project__gallery--70-30 .project__gallery-item:last-child {
flex: 0.7;
}
} .project__next {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0 120px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.project__next-back,
.project__next-arrow {
width: 220px;
font-size: 15px;
color: #A5A5A5;
text-decoration: none;
transition: 0.3s;
}
.project__next-back:hover,
.project__next-arrow:hover {
color: #fff;
opacity: 0.55;
}
.project__next-arrow {
text-align: right;
}
.project__next-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
flex: 1;
}
.project__next-label {
font-size: 15px;
color: #A5A5A5;
}
.project__next-title {
font-family: "Playfair Display", "Inter", sans-serif;
font-size: 40px;
line-height: 1.05;
color: #E0DFDB;
text-decoration: none;
transition: 0.35s;
}
.project__next-title:hover {
color: #fff;
opacity: 0.65;
}
@media (max-width: 992px) {
.project__text-block {
max-width: 440px;
margin: 0 auto 80px;
}
.project__text-block p {
margin: 0 0 24px;
font-size: 14px;
line-height: 24px;
color: #A5A5A5;
}
.project__text-block p:last-child {
margin-bottom: 0;
}
.project__next-back {
display: none;
}
.project__next {
flex-direction: column;
gap: 50px;
text-align: center;
}
.project__next {
padding: 120px 0 0px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.project__next-label {
font-size: 13px;
line-height: 24px;
}
.project__next-back,
.project__next-arrow {
width: auto;
text-align: center;
margin-bottom: 20px;
}
.project__next-title {
font-size: 28px;
}
} .gallery-page {
padding: 120px 0 180px;
}
.gallery-page__title {
font-family: "Playfair Display", "Inter", sans-serif;
font-weight: 400;
font-size: 48px;
line-height: 54px;
margin: 16px auto;
letter-spacing: 0px;
}
.gallery-page .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.gallery-page .container .breadcrumbs {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-family: "Roboto Mono";
margin-bottom: 0px;
font-size: 12px;
letter-spacing: 0.08em;
}
.gallery-page .container .breadcrumbs a {
font-family: "Roboto Mono";
text-decoration: none;
opacity: 0.7;
}
.gallery-page .container .breadcrumbs a:hover {
opacity: 1;
}
.gallery-page__grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
margin: 80px 0 120px;
}
.gallery-card {
flex: 1 1 calc(50% - 16px);
max-width: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
}
.gallery-card__image {
overflow: hidden;
display: flex;
width: 100%;
height: 790px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.gallery-card__image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-card__title {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin: 32px 0 40px;
color: #E0DFDB;
font-family: "Roboto Mono";
font-size: 21px;
font-weight: 400;
line-height: 26px;
}
.gallery-card:hover .gallery-card__image img {
transform: scale(1.04);
}
.gallery-card:hover .gallery-card__arrow {
transform: translate(4px, -4px);
}
.gallery-card__arrow {
flex-shrink: 0;
transition: transform 0.3s ease;
fill: #E0DFDB;
color: #E0DFDB;
width: 15px;
height: 15px;
}
.gallery-card__arrow:hover {
transform: translate(4px, -4px);
}
@media (max-width: 768px) {
.gallery-page {
padding: 80px 0 120px;
}
.gallery-page__title {
font-size: 28px;
line-height: 36px;
margin: 16px auto;
}
.gallery-page .container {
max-width: 100%;
}
.gallery-page .container .breadcrumbs {
display: none;
}
.gallery-page__grid {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 32px;
margin: 40px 0 40px;
}
.gallery-card {
width: 100%;
}
.gallery-card__image {
height: 430px;
}
.gallery-card__title {
gap: 12px;
margin: 20px 0 32px;
font-size: 14px;
}
.gallery-card:hover .gallery-card__image img {
transform: scale(1.04);
}
.gallery-card:hover .gallery-card__arrow {
transform: translate(4px, -4px);
}
.gallery-card__arrow {
flex-shrink: 0;
transition: transform 0.3s ease;
fill: #E0DFDB;
color: #E0DFDB;
width: 15px;
height: 15px;
}
.gallery-card__arrow:hover {
transform: translate(4px, -4px);
}
} .home {
padding: 0px 0 180px;
}
.home__title {
font-family: "Playfair Display", "Inter", sans-serif;
font-weight: 400;
font-size: 48px;
line-height: 54px;
margin: 16px auto;
letter-spacing: 0px;
}
.home .container {
max-width: 1280px;
margin: 0 auto;
padding: 40px 32px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 80px;
margin-bottom: 180px;
}
.hero__image {
width: 58%;
}
.hero__image img {
display: block;
width: 100%;
height: auto;
}
.hero__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
width: 34%;
position: sticky;
top: 120px;
}
.hero__title {
margin: 0;
font-family: "Playfair Display", "Inter", sans-serif;
font-weight: 400;
color: #E0DFDB;
font-size: 48px;
line-height: 1.05;
letter-spacing: 0;
margin: 0 0 32px;
}
.hero__text {
font-family: "Roboto Mono";
color: #A5A5A5;
font-size: 14px;
line-height: 26px;
padding: 0;
}
.hero__text p {
margin: 0;
}
.home-gallery {
margin-top: 180px;
}
.home-gallery__title {
margin-bottom: 64px;
font-family: "Playfair Display", "Inter", sans-serif;
font-size: 48px;
line-height: 54px;
font-weight: 400;
letter-spacing: 0px;
}
.home-gallery__top {
display: flex;
gap: 140px;
align-items: flex-start;
margin-bottom: 40px;
}
.home-gallery__bottom {
display: flex;
flex-direction: row-reverse;
gap: 80px;
justify-content: center;
align-items: center;
margin: 140px auto 100px;
width: 100%;
}
.home .gallery-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: #E0DFDB;
}
.home .gallery-card--small {
flex: 0 0 100%;
}
.home .gallery-card--large {
flex: 1;
}
.home .gallery-card--wide {
width: 100%;
}
.home .gallery-card__image {
overflow: hidden;
}
.home .gallery-card__image img {
display: block;
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
transition: 0.5s;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.home .gallery-card:hover img {
transform: scale(1.02);
}
.home .gallery-card__footer {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.home .gallery-card__title {
margin: 0;
}
.home .gallery-card__arrow {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.home-gallery .gallery-card__image {
height: auto;
}
.home-gallery .left-section {
display: flex;
flex-direction: column;
gap: 260px;
width: 40%;
}
.home-gallery .right-section {
display: flex;
width: 60%;
}
.home-gallery__title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 320px;
}
.home-gallery .gallery-card {
width: 100%;
}
@media (max-width: 768px) {
.home {
width: 100%;
padding: 0px 0 180px;
}
.home__title {
font-size: 24px;
line-height: 32px;
margin: 16px auto;
}
.home .container {
max-width: 100%;
padding: 60px 32px;
}
.hero {
width: 100%;
}
.hero__wrapper {
display: flex;
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
width: 100%;
margin-bottom: 100px;
}
.hero__image {
width: 100%;
}
.hero__image img {
display: block;
width: 100%;
height: auto;
}
.hero__content {
display: flex;
width: 100%;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
position: relative;
top: 0;
}
.hero__title {
margin: 0;
width: 100%;
font-family: "Playfair Display", "Inter", sans-serif;
font-weight: 400;
color: #E0DFDB;
font-size: 24px;
line-height: 1.05;
letter-spacing: 0;
margin: 0 0 32px;
}
.hero__text {
font-family: "Roboto Mono";
color: #A5A5A5;
font-size: 14px;
line-height: 26px;
padding: 0;
}
.hero__text p {
margin: 0;
}
.home-gallery {
width: 100%;
margin-top: 32px;
}
.home-gallery__title {
margin-bottom: 64px;
font-size: 40px;
line-height: 38px;
}
.home-gallery__top {
display: flex;
flex-direction: column;
gap: 60px;
align-items: flex-start;
margin-bottom: 0px;
}
.home-gallery__bottom {
display: flex;
flex-direction: column-reverse;
gap: 60px;
justify-content: center;
align-items: center;
margin: 60px auto 60px;
width: 100%;
max-width: 1000px;
}
.reverse.home-gallery__top {
flex-direction: column-reverse;
gap: 100px;
}
.home .gallery-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: #E0DFDB;
}
.home .gallery-card--small {
flex: 0 0 100%;
}
.home .gallery-card--large {
flex: 1;
}
.home .gallery-card--wide {
width: 100%;
}
.home .gallery-card__image {
overflow: hidden;
}
.home .gallery-card__image img {
display: block;
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
transition: 0.5s;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.home .gallery-card:hover img {
transform: scale(1.02);
}
.home .gallery-card__footer {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.home .gallery-card__title {
margin: 0;
}
.home .gallery-card__arrow {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.home-gallery .gallery-card__image {
height: auto;
}
.home-gallery .left-section {
display: flex;
flex-direction: column;
gap: 60px;
width: 100%;
}
.home-gallery .right-section {
display: flex;
width: 100%;
}
.home-gallery__title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.home-gallery .gallery-card {
width: 100%;
}
}
.contact-form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 12px;
}
.email, .social {
color: #A5A5A5;
}
.email {
margin: 20px 0 0;
padding: 0;
}
.social {
margin: 0;
}