@font-face {
  font-family: "Neue Montreal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2"), url("../assets/fonts/PPNeueMontreal-Regular.woff") format("woff");
}
@font-face {
  font-family: "Neue Montreal";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/PPNeueMontreal-Italic.woff2") format("woff2"), url("../assets/fonts/PPNeueMontreal-Italic.woff") format("woff");
}
@font-face {
  font-family: "Neue Montreal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2"), url("../assets/fonts/PPNeueMontreal-Medium.woff") format("woff");
}
@font-face {
  font-family: "Neue Montreal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/PPNeueMontreal-Bold.woff2") format("woff2"), url("../assets/fonts/PPNeueMontreal-Bold.woff") format("woff");
}
@font-face {
  font-family: "Neue Montreal";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/PPNeueMontreal-BoldItalic.woff2") format("woff2"), url("../assets/fonts/PPNeueMontreal-BoldItalic.woff") format("woff");
}
@font-face {
  font-family: "Eiko";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/PPEiko-Regular.woff2") format("woff2"), url("../assets/fonts/PPEiko-Regular.woff") format("woff");
}
@font-face {
  font-family: "Eiko";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/PPEiko-Medium.woff2") format("woff2"), url("../assets/fonts/PPEiko-Medium.woff") format("woff");
}
@font-face {
  font-family: "Eiko";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/PPEiko-MediumItalic.woff2") format("woff2"), url("../assets/fonts/PPEiko-MediumItalic.woff") format("woff");
}
@font-face {
  font-family: "Eiko";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/PPEiko-Black.woff2") format("woff2"), url("../assets/fonts/PPEiko-Black.woff") format("woff");
}
@font-face {
  font-family: "Eiko";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/PPEiko-BlackItalic.woff2") format("woff2"), url("../assets/fonts/PPEiko-BlackItalic.woff") format("woff");
}
.title {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
  font-family: "Neue Montreal", serif;
  font-weight: 500;
}
.title--extrasmall {
  font-size: 1.92rem;
}
.title--small {
  font-size: 2.7648rem;
}
.title--medium {
  font-size: 3.981312rem;
}
.title--large {
  margin-bottom: 96px;
  font-size: 5.73308928rem;
}
.title--extralarge {
  font-size: 8.2556485632rem;
}
.title--question {
  font-size: 3.981312rem;
}

@media (min-width: 650px) {
  body, button {
    font-size: 1.7rem;
  }
  .title--extrasmall {
    font-size: 2.04rem;
  }
  .title--small {
    font-size: 2.9376rem;
  }
  .title--medium {
    font-size: 4.230144rem;
  }
  .title--large {
    font-size: 6.09140736rem;
  }
  .title--extralarge {
    font-size: 8.7716265984rem;
  }
  .title--question {
    font-size: 6.09140736rem;
  }
}
@media (min-width: 1300px) {
  body, button {
    font-size: 1.8rem;
  }
  .title--extrasmall {
    font-size: 2.16rem;
  }
  .title--small {
    font-size: 3.1104rem;
  }
  .title--medium {
    font-size: 4.478976rem;
  }
  .title--large {
    font-size: 6.44972544rem;
  }
  .title--extralarge {
    font-size: 9.2876046336rem;
  }
  .title--question {
    font-size: 9.2876046336rem;
  }
}
.header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.header--bg {
  position: fixed;
}
.header--bg .menu {
  background-color: #FFF;
  padding: 12px 24px;
  animation: menu 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.header--bg .menu__logo svg {
  fill: #000000;
}
.header--bg .menu__page {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.header--bg .btn--menu span:before, .header--bg .btn--menu span:after {
  background-color: #000000;
}

.last {
  display: none;
  grid-column: 1/6;
  margin-top: auto;
  padding-bottom: 48px;
}
.last small {
  display: block;
  color: #999999;
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.last img {
  transition: filter 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  width: 100%;
  border-radius: 16px;
}
.last a:hover img {
  filter: brightness(0.8);
}

.menu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  padding: 24px 24px 0 24px;
}
.menu__logo {
  grid-column: 1/2;
  display: flex;
  align-items: center;
  z-index: 13;
}
.menu__logo svg {
  fill: #FFF;
}
.menu__page {
  grid-column: 2/5;
  display: none;
  z-index: 13;
}
.menu__btn {
  grid-column: 5/6;
  display: flex;
  justify-content: flex-end;
}
.menu__burger {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100vw;
}
.menu__burger .container {
  padding: 0;
  position: relative;
}
.menu__main {
  position: absolute;
  display: grid;
  width: calc(100% - 48px);
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  background-color: #000000;
  padding-top: 96px;
  margin: 0 24px;
  box-shadow: 0 0 12px #000000;
  z-index: 12;
  transform: translateY(-105%);
  border-bottom: 1px solid #999999;
}
.menu__more {
  position: absolute;
  display: grid;
  background-color: #000000;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  padding: 24px;
  width: calc(100% - 48px);
  box-shadow: 0 0 12px #000000;
  z-index: 11;
  transform: translateY(-105%);
}
.menu__more p {
  grid-column: 1/2;
  display: none;
  align-items: flex-end;
  font-size: 6.44972544rem;
  font-weight: 500;
  line-height: 0.7;
  color: #FFF;
  margin: 0;
}
.menu__more .list__media {
  grid-column: 1/6;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 48px;
}
.menu__more .list__media a {
  color: #FFF;
  font-size: 1.4rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 0;
  position: relative;
}
.menu__more .list__media a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 10px;
  left: 0;
  background-color: #FFF;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.menu__more .list__media a:hover:after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

@keyframes menu {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.author {
  grid-column: 1/6;
  color: #999999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 48px;
}
.author__lastname {
  font-family: "Eiko", serif;
  font-style: italic;
}
.author__tasks {
  overflow: hidden;
  height: 3.981312rem;
}

.nav {
  grid-column: 1/6;
  padding-bottom: 48px;
}
.nav__list {
  counter-reset: li;
}
.nav__element {
  overflow: hidden;
}
.nav__element--link {
  font-size: 3.1104rem;
  font-weight: 500;
  color: #999999;
  text-decoration: none;
  padding: 3px 0;
  position: relative;
}
.nav__element--link:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 45%;
  right: -18px;
  background-color: #FAB229;
  transform: scale(0, 0);
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav__element--link:hover:after {
  transform-origin: center;
  transform: scale(1, 1);
}
.nav__element--actif {
  color: #FFF;
}

.btn--menu {
  display: block;
  width: 32px;
  height: 48px;
  padding-left: 16px;
  z-index: 13;
}
.btn--menu span {
  margin: 0 auto;
  position: relative;
}
.btn--menu span:before, .btn--menu span:after {
  position: absolute;
  content: "";
  width: 32px;
  height: 2px;
  background-color: #FFF;
  display: block;
  transition: margin 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn--menu span:before {
  margin: -3px 0 0;
}
.btn--menu span:after {
  margin: 3px 0 0;
}
.btn--menu:hover span:before {
  margin: -6px 0 0;
}
.btn--menu:hover span:after {
  margin: 6px 0 0;
}

.open span {
  transition-delay: 0.3s;
}
.open span:before, .open span:after {
  background-color: #FFF;
  transition-property: margin, transform;
  transition-duration: 0.3s;
  transition-delay: 0.3s, 0;
}
.open span:before {
  margin-top: 0;
  transform: rotate(45deg);
  transition-delay: 0, 0.3s;
}
.open span:after {
  margin-top: 0;
  transform: rotate(-45deg);
  transition-delay: 0, 0.3s;
}
.open:hover span:before {
  margin: 0;
}
.open:hover span:after {
  margin: 0;
}

body[data-menu] .btn--menu span:before, body[data-menu] .btn--menu span:after {
  background-color: #FFF;
}
body[data-menu] .menu__logo svg {
  fill: #FFF;
}
body[data-menu] .menu__burger {
  position: fixed;
}
body[data-menu] .menu__page {
  color: #FFF;
}

@media (min-width: 650px) {
  .header--bg .menu {
    padding: 12px 48px;
  }
  .menu {
    grid-template-columns: repeat(7, 1fr);
    padding: 24px 48px 0 48px;
  }
  .menu__page {
    grid-column: 2/7;
  }
  .menu__btn {
    grid-column: 7/8;
  }
  .menu__main {
    width: auto;
    grid-template-columns: repeat(7, 1fr);
    margin: 0 48px;
  }
  .menu__more {
    width: calc(100% - 96px);
    padding: 24px 48px;
    grid-template-columns: repeat(7, 1fr);
  }
  .menu__more p {
    display: flex;
    grid-column: 1/4;
  }
  .menu__more .list__media {
    justify-content: flex-end;
    grid-column: 4/8;
  }
  .last {
    display: block;
    grid-column: 1/4;
  }
  .author {
    border-right: 1px solid #7A7A7A;
    grid-column: 1/6;
  }
  .author__tasks {
    height: 4.230144rem;
  }
  .nav {
    padding-bottom: 96px;
    grid-column: 6/8;
  }
}
@media (min-width: 1300px) {
  .menu {
    grid-template-columns: repeat(9, 1fr);
  }
  .menu__page {
    grid-column: 2/9;
  }
  .menu__btn {
    grid-column: 9/10;
  }
  .menu__main {
    grid-template-columns: repeat(9, 1fr);
  }
  .menu__more {
    grid-template-columns: repeat(9, 1fr);
  }
  .menu__more p {
    grid-column: 1/6;
  }
  .menu__more .list__media {
    justify-content: flex-start;
    grid-column: 6/10;
  }
  .last {
    grid-column: 1/3;
  }
  .author {
    grid-column: 3/6;
  }
  .author__tasks {
    height: 4.478976rem;
  }
  .nav {
    padding-bottom: 192px;
    grid-column: 6/10;
  }
}
.footer {
  background-color: #000000;
  color: #FFF;
}
.footer .container {
  padding: 48px 24px;
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  border-bottom: 1px solid #7A7A7A;
}
.footer__top--left, .footer__top--center, .footer__top--right {
  padding-bottom: 48px;
}
.footer__top--left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  grid-column: 1/4;
  border-right: 1px solid #7A7A7A;
}
.footer__top--center {
  grid-column: 4/6;
}
.footer__top--right {
  border-top: 1px solid #7A7A7A;
  padding-top: 48px;
  grid-column: 1/6;
}
.footer__top--right p {
  margin: 0;
  color: #7A7A7A;
}
.footer__bottom {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 48px 24px;
  margin-top: 24px;
}
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 2.16rem;
  font-weight: 500;
}
.footer__nav a {
  color: #FFF;
  text-decoration: none;
  padding: 3px 0;
  position: relative;
}
.footer__nav a:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 33%;
  right: -18px;
  background-color: #FAB229;
  transform: scale(0, 0);
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.footer__nav a:hover:after {
  transform-origin: center;
  transform: scale(1, 1);
}
.footer__media {
  display: flex;
  justify-content: center;
  gap: 48px;
  grid-row: 1/2;
  grid-column: 1/6;
}
.footer__media a {
  color: #FFF;
  font-size: 1.4rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 0;
  position: relative;
}
.footer__media a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 10px;
  left: 0;
  background-color: #FFF;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.footer__media a:hover:after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.copyright {
  display: flex;
  justify-content: center;
  grid-row: 2/3;
  grid-column: 1/6;
  color: #FFF;
  text-transform: uppercase;
  font-size: 1.4rem;
}

@media (min-width: 650px) {
  .footer .container {
    padding: 48px;
  }
  .footer__top {
    grid-template-columns: repeat(7, 1fr);
  }
  .footer__top--left, .footer__top--center, .footer__top--right {
    padding-bottom: 48px;
  }
  .footer__top--left {
    grid-column: 1/4;
  }
  .footer__top--center {
    grid-column: 4/8;
  }
  .footer__top--right {
    grid-column: 1/8;
  }
  .footer__bottom {
    grid-template-columns: repeat(7, 1fr);
  }
  .footer__media {
    justify-content: flex-start;
    grid-column: 4/8;
  }
  .copyright {
    justify-content: flex-start;
    grid-row: 1/2;
    grid-column: 1/4;
  }
}
@media (min-width: 1300px) {
  .footer__top {
    grid-template-columns: repeat(9, 1fr);
  }
  .footer__top--left, .footer__top--center, .footer__top--right {
    padding-bottom: 48px;
  }
  .footer__top--left {
    grid-column: 1/3;
  }
  .footer__top--center {
    border-right: 1px solid #7A7A7A;
    grid-column: 3/6;
  }
  .footer__top--right {
    border-top: 0;
    padding-top: 0;
    margin-top: auto;
    grid-column: 6/9;
  }
  .footer__media {
    grid-column: 5/10;
  }
  .copyright {
    grid-column: 1/6;
  }
}
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Neue Montreal", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: overlay;
}

textarea {
  resize: vertical;
}

p {
  margin: 36px 0;
}

::selection {
  background-color: #FAB229;
  color: #000000;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #000000;
}

.btn {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: "Neue Montreal", sans-serif;
}
.btn--contact {
  padding: 8px 24px;
  text-transform: uppercase;
  font-size: 2.4rem;
  color: #FFF;
  border-radius: 50px;
  background-color: #000000;
}
.btn--contact:hover .svg {
  transform: translateX(8px);
}

.container {
  padding: 0 24px;
}

.intro {
  background-size: cover;
  background-position: center;
  height: 100vh;
  z-index: -1;
}
.intro--home {
  background-image: url("../assets/images/menu.jpg");
}
.intro--works {
  background-image: url("../assets/images/hill.jpg");
}
.intro--contact {
  background-image: url("../assets/images/beach.jpg");
}

.section--swiper .container {
  padding: 96px 0;
}
.section--intro {
  position: absolute;
  top: 0;
}
.section--intro .container {
  height: calc(100vh - 384px);
  width: calc(100vw - 48px);
  padding: 192px 24px;
}
.section--intro .title {
  color: #FFF;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  font-size: 5.73308928rem;
}
.section--swiper .title--large {
  padding: 0 24px;
}
.section--jaune {
  background-color: #FAB229;
  position: relative;
}
.section--jaune .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  position: relative;
  padding: 48px 24px;
}
.section--jaune .title {
  grid-column: 1/6;
  height: 6.44972544rem;
}
.section--jaune .background {
  background-color: #FAB229;
}
.section--jaune .bold {
  grid-column: 1/6;
}
.section--jaune p {
  grid-column: 1/6;
}
.section--info {
  height: 100vh;
  position: relative;
  background-color: #000000;
}
.section--contact {
  position: relative;
}
.section--contact .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  position: relative;
}
.section--contact .parallax {
  grid-row: 2/3;
  grid-column: 1/6;
}
.section--contact .title {
  grid-row: 1/2;
  grid-column: 1/6;
  margin: 96px 0;
}
.section--contact p {
  margin: 48px 0;
  grid-row: 3/4;
  grid-column: 1/6;
}
.section--question {
  position: relative;
  background-color: #FFF;
}
.section--question .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  position: relative;
  height: 75vh;
}
.section--question .title {
  grid-column: 1/6;
  text-align: center;
  margin: auto 0;
}
.section--services .container {
  padding: 48px 24px;
  width: calc(100vw - 48px);
  overflow: hidden;
}
.section--works .container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 24px;
  row-gap: 48px;
  padding: 96px 24px;
}
.section--works .title--large {
  border-top: 1px solid #999999;
  padding-top: 24px;
  margin: 0;
  grid-column: 1/2;
}
.section--works .bold {
  grid-column: 1/2;
}
.section--loop .container {
  padding: 0;
  border-top: 1px solid #7A7A7A;
}

.hidden:nth-child(1) {
  grid-row: 1/2;
  grid-column: 1/6;
}
.hidden:nth-child(2) {
  grid-row: 2/3;
  grid-column: 2/6;
}
.hidden:nth-child(3) {
  grid-row: 3/4;
  font-size: 3.981312rem;
  grid-column: 1/6;
}
.hidden:nth-child(3) span {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}
.hidden:nth-child(3) div {
  font-family: "PP Eiko", serif;
  font-style: italic;
  margin-right: 48px;
}
.hidden:nth-child(4) {
  grid-row: 4/5;
  grid-column: 1/6;
}
.hidden span {
  height: 100%;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
}

.line {
  position: absolute;
  background-color: #000000;
  opacity: 0.4;
  width: 1px;
  top: 0;
  height: 100%;
}
.line--dark {
  background-color: #FFF;
}
.line--1 {
  left: 25%;
}
.line--2 {
  left: 50%;
}
.line--3 {
  left: 75%;
}

.eiko {
  font-family: "Eiko", serif;
  font-style: italic;
  font-weight: 500;
}

.background {
  display: block;
  background-color: #FFF;
  padding: 12px 0;
}

.bold {
  margin: 0 0 96px 0;
  text-indent: 96px;
  font-size: 1.92rem;
  line-height: 1;
  text-transform: uppercase;
}

.svg {
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  padding-left: 8px;
  width: 24px;
}

.parallax {
  height: 72vh;
  width: 100%;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.parallax--city {
  background-image: url("../assets/images/city.jpg");
  grid-column: 1/6;
  margin-bottom: 48px;
}
.parallax--author {
  background-image: url("../assets/images/about.jpg");
  grid-column: 1/6;
}
.parallax--contact {
  background-image: url("../assets/images/contact.jpg");
}
.parallax--works {
  height: 48vw;
  transition: filter 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.parallax--works:hover {
  filter: brightness(0.8);
}
.parallax--maximevo {
  background-image: url("../assets/images/maximevo.jpg");
}
.parallax--ranked {
  background-image: url("../assets/images/ranked.jpg");
}
.parallax--wezwa {
  background-image: url("../assets/images/wezwa.jpg");
}
.parallax--alex {
  background-image: url("../assets/images/alex.jpg");
}
.parallax--rover {
  background-image: url("../assets/images/rover.jpg");
}
.parallax--main {
  background-image: url("../assets/images/main.jpg");
}
.parallax--concombre {
  background-image: url("../assets/images/concombre.jpg");
}
.parallax--cosplay {
  background-image: url("../assets/images/cosplay.jpg");
}
.parallax--imal {
  background-image: url("../assets/images/imal.jpg");
}
.parallax--shirley {
  background-image: url("../assets/images/shirley.jpg");
}

.form {
  grid-row: 5/6;
  grid-column: 1/6;
}
.form__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form__identity {
  display: flex;
  gap: 24px;
}
.form__field {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}
.form__input {
  font-family: inherit;
  font-size: 2rem;
  line-height: 1.5;
  color: #999999;
  width: 100%;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: none;
  border-bottom: 1px solid #000000;
  transition: border-bottom 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.form__input:focus, .form__input:valid {
  border-bottom: 1px solid #999999;
}

.cursors {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
}

.cursor {
  background-color: #000000;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  color: #FFF;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 1px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.active--drag, .active--open, .active--email {
  display: flex;
  opacity: 1;
}

.card {
  margin: 0 24px;
  border-top: 1px solid #7A7A7A;
  text-transform: uppercase;
}
.card__content {
  padding: 12px 0 24px 0;
}
.card__type {
  display: block;
  color: #7A7A7A;
  letter-spacing: 1px;
  font-size: 1.4rem;
  margin-bottom: 24px;
}
.card .title--small {
  margin-bottom: 12px;
  height: 8.2944rem;
}
.card img {
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 16px;
}
.card a {
  display: flex;
  overflow: hidden;
  border-radius: 16px;
}
.card a:hover img {
  transform: scale(1.05);
  filter: brightness(0.8);
}

.services {
  font-size: 3.981312rem;
  font-weight: 500;
  position: relative;
  left: 10%;
}
.services:nth-child(1) {
  padding-left: 20vw;
}
.services:nth-child(3) {
  padding-left: 5vw;
}
.services:nth-child(4) {
  padding-left: 15vw;
}

.banner {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.banner__element {
  font-size: 3.1104rem;
  text-transform: uppercase;
  padding: 12px 24px 12px 0;
}
.banner__element:after {
  content: "+";
  padding-left: 24px;
}

@keyframes banner {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.list__banner {
  display: flex;
  position: relative;
  white-space: nowrap;
  animation: banner 30s linear infinite;
}

.anchor {
  position: absolute;
  bottom: 48px;
  right: 48px;
  text-decoration: none;
  color: #FFF;
}

.hidden {
  overflow: hidden;
}
.hidden span {
  display: block;
}

.works .title {
  margin-bottom: 24px;
}
.works__content {
  text-transform: uppercase;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
}
.works__type {
  color: #7A7A7A;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
}
.works__date {
  grid-column: 2/4;
}

@media (min-width: 650px) {
  .bold {
    font-size: 2.9376rem;
  }
  .container {
    padding: 0 48px;
  }
  .section--intro .container {
    height: calc(100vh - 384px);
    width: calc(100vw - 96px);
    padding: 192px 48px;
  }
  .section--intro .title {
    grid-template-columns: repeat(7, 1fr);
    font-size: 8.7716265984rem;
  }
  .section--contact .container {
    grid-template-columns: repeat(7, 1fr);
  }
  .section--contact .parallax {
    grid-row: 2/3;
    grid-column: 1/3;
    margin-bottom: 48px;
  }
  .section--contact .title {
    grid-column: 1/4;
  }
  .section--contact p {
    grid-row: 2/3;
    grid-column: 4/8;
    margin: 0 0 96px 0;
  }
  .section--works .container {
    padding: 96px 48px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 96px;
  }
  .section--works .title--large {
    grid-column: 1/3;
  }
  .section--works .bold {
    grid-column: 1/3;
  }
  .section--question .container {
    grid-template-columns: repeat(7, 1fr);
  }
  .section--question .title {
    grid-column: 1/8;
  }
  .section--jaune .container {
    padding: 48px;
    grid-template-columns: repeat(7, 1fr);
  }
  .section--jaune .title {
    grid-column: 1/8;
  }
  .section--jaune .bold {
    grid-column: 1/8;
  }
  .section--jaune p {
    grid-column: 3/8;
  }
  .section--services .container {
    padding: 96px 48px;
    width: calc(100vw - 96px);
  }
  .parallax {
    height: 48vw;
  }
  .parallax--works {
    height: 24vw;
  }
  .parallax--city {
    grid-column: 1/4;
    margin-bottom: 0;
  }
  .parallax--author {
    grid-column: 4/8;
  }
  .hidden:nth-child(1) {
    grid-row: 1/2;
    grid-column: 2/8;
  }
  .hidden:nth-child(2) {
    grid-row: 2/3;
    grid-column: 3/8;
  }
  .hidden:nth-child(3) {
    grid-row: 3/4;
    font-size: 4.230144rem;
    grid-column: 1/7;
  }
  .hidden:nth-child(4) {
    grid-row: 4/5;
    grid-column: 2/8;
  }
  .form {
    grid-column: 1/6;
  }
  .card .title--small {
    height: 8.8128rem;
  }
  .services {
    font-size: 6.09140736rem;
  }
}
@media (min-width: 1300px) {
  .bold {
    font-size: 3.1104rem;
  }
  .section--intro .title {
    grid-template-columns: repeat(9, 1fr);
    font-size: 14.7375096364rem;
  }
  .section--contact .container {
    grid-template-columns: repeat(9, 1fr);
  }
  .section--contact .parallax {
    grid-row: 2/3;
    grid-column: 8/10;
    margin: 0;
  }
  .section--contact .title {
    grid-column: 1/4;
  }
  .section--contact p {
    grid-row: 1/2;
    grid-column: 6/9;
    margin-top: 96px;
  }
  .section--works .container {
    grid-template-columns: repeat(3, 1fr);
  }
  .section--works .title--large {
    grid-column: 1/4;
  }
  .section--works .bold {
    grid-column: 2/4;
  }
  .section--question .container {
    grid-template-columns: repeat(9, 1fr);
  }
  .section--question .title {
    grid-column: 3/8;
  }
  .section--jaune .container {
    grid-template-columns: repeat(9, 1fr);
  }
  .section--jaune .title {
    grid-column: 1/6;
    height: 6.44972544rem;
  }
  .section--jaune .bold {
    grid-column: 6/10;
    margin: 0;
  }
  .section--jaune p {
    align-self: flex-end;
    grid-column: 6/9;
  }
  .parallax {
    height: 24vw;
  }
  .parallax--works {
    height: 16vw;
  }
  .parallax--city {
    height: 32vw;
    grid-column: 1/3;
  }
  .parallax--author {
    height: 16vw;
    grid-column: 3/5;
    align-self: flex-end;
  }
  .hidden:nth-child(1) {
    grid-row: 1/2;
    grid-column: 2/4;
  }
  .hidden:nth-child(2) {
    grid-row: 2/3;
    grid-column: 3/6;
  }
  .hidden:nth-child(3) {
    grid-row: 3/4;
    font-size: 4.478976rem;
    grid-column: 5/7;
  }
  .hidden:nth-child(4) {
    grid-row: 3/4;
    grid-column: 7/9;
  }
  .hidden span {
    height: 100%;
  }
  .form {
    grid-row: 2/3;
    grid-column: 1/7;
  }
  .services {
    font-size: 9.2876046336rem;
  }
}
/*# sourceMappingURL=main.css.map*/