/*

Theme Name: ARTGO Média Base
Description: Template de base Artgo Média.
Author: ARTGO Média
Author URI: http://www.artgomedia.com
Version: 1.0

*/

/****************** FONTS *****************/

@font-face {
  font-family: "Open Sans";
  src: url(assets/fonts/OpenSans.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sansation";
  src: url(assets/fonts/Sansation-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url(assets/fonts/Sansation-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/****************** VARIABLES *****************/

:root {
  /* COULEURS */
  --blue-50: #f1f7fe;
  --blue-300: #87bbf2;
  --blue-500: #207cd7;
  --blue-800: #124580;
  --blue-900: #0d2444;
  --red-50: #fff1f1;
  --red-600: #e52620;
  --red-900: #841b18;
  --light-50: #fff;
  --dark-950: #000;

  /* TAILLES POLICES */
  --font-size-xs: 12px;
  --font-size-sm: 15px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --font-size-xl: 20px;

  --font-size-h1: clamp(30px, 2.6vw, 50px);
  --font-size-h2: clamp(30px, 1.82vw, 35px);
  --font-size-h3: clamp(25px, 1.56vw, 30px);

  /* MARGES */
  --gutter-blocks: 40px;
  --gutter-section: 80px;

  /* FONTS */
  --main-font: "Open Sans", sans-serif;
  --secondary-font: "Sansation", sans-serif;
}

/****************** RESET *****************/

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  /* outline: 1px solid red; */
}

a,
a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
}

p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

/****************** GLOBAL *****************/

body {
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: var(--main-font);
  font-size: var(--font-size-m);
  font-weight: 400;
  color: var(--blue-800);
  background-color: var(--light-50);
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background: linear-gradient(0deg, var(--blue-800) 0%, var(--blue-800) 100%),
    var(--header-bg) lightgray 50% / cover no-repeat;
  background-blend-mode: multiply, normal;
  background-position: top, top;
  background-size: 100% 380px, 100% 380px;
  z-index: -1;
}

.body-mask {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 500;
}

body:has(.top-menu__link__submenu.active) .body-mask {
  display: flex;
}

/* BOXING */

.boxed-xl {
  width: 90vw;
  max-width: 1720px;
  margin: 0 auto;
}
.boxed-base {
  width: 90vw;
  max-width: 1520px;
  margin: 0 auto;
}

.boxed-sm {
  width: 90vw;
  max-width: 1320px;
  margin: 0 auto;
}

.boxed-xs {
  width: 90vw;
  max-width: 920px;
  margin: 0 auto;
}

section {
  background-color: var(--light-50);
  padding: var(--gutter-section) 0;
}

section > :last-child {
  margin-bottom: 0;
}

.section-color {
  position: relative;
  background-color: var(--blue-50);
}

section.boxed {
  max-width: 1720px;
  width: 90vw;
  padding-left: clamp(16px, 5vw, 100px);
  padding-right: clamp(16px, 5vw, 100px);
  margin: 0 auto;
}

section.boxed > * {
  width: 100%;
}

section:last-of-type.boxed {
  margin-bottom: var(--gutter-section);
}

/* STYLING TEXTS */

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.content {
  font-weight: 400;
  line-height: 1.5;
}

.content :is(p, ul, ol) {
  margin-bottom: var(--font-size-m);
}

.content :is(ul, ol) {
  padding-left: 25px;
}

.content p:last-child {
  margin-bottom: 0;
}

.content :is(ul li, ol li) {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.content ul li::before {
  content: "▶";
  font-size: var(--font-size-xs);
  color: var(--red-600);
  position: absolute;
  top: 4px;
  left: 0;
}

.content ol {
  counter-reset: item;
}

.content ol li::before {
  position: absolute;
  content: counter(item) ".";
  counter-increment: item;
  color: var(--red-600);
  left: 0;
  font-weight: 700;
}

.content a {
  color: var(--red-600);
}

.content a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.content :is(h2, h3) {
  margin: 20px 0;
}

.content :is(h2:first-child, h3:first-child) {
  margin-top: 0;
}

/* HEADINGS */

.artgo-h1 {
  font-family: var(--secondary-font);
  font-size: var(--font-size-h1);
  color: var(--light-50);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.content h2,
.artgo-h2 {
  font-family: var(--secondary-font);
  font-size: var(--font-size-h2);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 1.5;
}
.content h2 em,
.artgo-h2 span {
  font-style: normal;
  color: var(--red-600);
}

.content h3,
.artgo-h3 {
  font-family: var(--secondary-font);
  font-size: var(--font-size-h3);
  font-weight: 700;
  line-height: 1.5;
}

/* BUTTONS */

.artgo-btn {
  font-family: var(--secondary-font);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  width: fit-content;
}

.artgo-btn span {
  border: 1px solid var(--red-600);
  color: var(--blue-900);
  padding: 9px 20px;
  transition: color 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease;
}

.artgo-btn::before {
  content: url(assets/images/deco-btn.svg);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: var(--red-600);
  width: 40px;
  line-height: 1;
}

.artgo-btn:hover span {
  color: var(--light-50);
  background-color: var(--blue-900);
  border-color: var(--blue-900);
}

/****************** HEADER *****************/

header {
  position: relative;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 1000;
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

header.hide {
  transform: translateY(-100px);
}

header.up {
  background-color: var(--light-50);
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

header:has(.top-menu__link__submenu.active) {
  background-color: var(--light-50);
}

header.menu-is-open {
  background-color: var(--blue-900) !important;
}

header.menu-is-open .header-top__top-menu {
  opacity: 0;
  visibility: hidden;
}

header.menu-is-open #header-logo {
  display: flex !important;
}

header.menu-is-open #header-logo-dark {
  display: none !important;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.header-top__logo {
  display: flex;
  align-items: center;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  height: 100%;
  width: 167px;
}

#header-logo {
  display: flex;
}
#header-logo-dark {
  display: none;
}

.header-top:has(.top-menu__link__submenu.active) #header-logo,
header.up #header-logo {
  display: none;
}
.header-top:has(.top-menu__link__submenu.active) #header-logo-dark,
header.up #header-logo-dark {
  display: flex;
}

.header-top__top-menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.top-menu__link {
  font-family: var(--secondary-font);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--light-50);
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 15px;
}

.header-top:has(.top-menu__link__submenu.active) .top-menu__link,
header.up .top-menu__link {
  color: var(--blue-900);
}

.top-menu__link:hover,
.top-menu__link:has(+ .top-menu__link__submenu.active) {
  color: var(--red-600) !important;
}

.top-menu__link__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  background: var(--light-50);
  backdrop-filter: blur(7.5px);
}

.top-menu__link__submenu-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 50px 0;
}

.top-menu__link__submenu.active {
  max-height: 100vh;
  transition: max-height 0.8s ease;
}

.submenu__link {
  display: flex;
  flex-direction: column;
  max-width: 350px;
  color: var(--blue-900);
  padding: 20px;
  overflow-x: hidden;
}

.submenu__link:hover {
  background-color: var(--blue-50);
}

.submenu__link__img img {
  width: 310px;
}

.submenu__link__title {
  display: flex;
  align-items: center;
  font-family: var(--secondary-font);
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin: 20px 0 10px;
  text-transform: uppercase;
}

.submenu__link:hover .submenu__link__title {
  color: var(--red-600);
}

.submenu__link__title::after {
  content: url(assets/images/arrow-menu.svg);
  opacity: 0;
  margin-left: auto;
}

.submenu__link:hover .submenu__link__title::after {
  content: url(assets/images/arrow-menu.svg);
  opacity: 1;
}

.submenu__link .content {
  border-top: 1px solid var(--blue-300);
  padding-top: 10px;
}

.header-top__menu {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  padding-left: 30px;
  height: 100%;
  display: flex;
  align-items: center;
}

#toggle-menu {
  background: none;
  cursor: pointer;
}

.header-top:has(.top-menu__link__submenu.active) #open-btn path,
header.up #open-btn path {
  fill: var(--blue-900);
}

.top-page {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gutter-blocks) 0;
}

.top-page-single {
  background-color: var(--light-50);
}

/* Breadcrumbs */

.top-page__breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 10px;
  font-size: var(--font-size-xs);
  color: var(--light-50);
  margin: 0 auto 20px;
}

.top-page__breadcrumb span a {
  color: var(--light-50);
}

.header-bot__breadcrumb span a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Top page home */

.top-page-home {
  position: relative;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  background: url(assets/images/bg-menu.svg) no-repeat top 15% left 10%;
  background-size: 600px;
}

.top-page-home::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 30vh solid var(--light-50);
  border-left: 100vw solid transparent;
  z-index: 1;
}

body.home::before {
  height: 950px;
  background-size: 100% 950px, 100% 950px;
}

.top-page-home__content {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 5vw;
  color: var(--light-50);
  z-index: 2;
}

.top-page-home__content__text {
  max-width: 540px;
}

.top-page-home__content__text__subtitle {
  font-family: var(--secondary-font);
  font-size: clamp(50px, 3.91vw, 75px);
  line-height: 1;
  font-weight: 700;
  text-wrap: balance;
  text-transform: uppercase;
}

.top-page-home__content__text__title {
  margin: 50px 0;
  text-wrap: balance;
}

.top-page-home__content__text .artgo-btn span {
  color: var(--light-50);
}

.top-page-home__content__text .artgo-btn:hover span {
  border-color: var(--light-50);
  color: var(--blue-900);
  background-color: var(--light-50);
}

.top-page-home__content__img img {
  width: fit-content;
  aspect-ratio: 760 / 430;
  max-width: 760px;
  width: 100%;
  height: auto;
}

/* Main menu */

#artgo-menu {
  display: flex;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset: 0;
  top: 101px;
  background: url(assets/images/bg-menu.svg) no-repeat bottom -93px right -60px,
    var(--blue-900);
  z-index: 9999;
  transition: opacity 0.3s ease;
}

#artgo-menu.active {
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
}

#artgo-menu nav {
  display: flex;
  padding: var(--gutter-blocks) 0;
  margin: auto;
}

.main-menu {
  width: 100%;
  columns: 3;
  column-gap: 5vw;
}

.main-menu > li {
  padding-bottom: var(--gutter-blocks);
  -webkit-column-break-inside: avoid;
}

.main-menu > li > a {
  font-family: var(--secondary-font);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--light-50);
}

.main-menu > li > a:hover {
  color: var(--red-600);
}

.main-menu > li > .sub-menu {
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-menu > li > .sub-menu li {
  position: relative;
  padding-left: 20px;
}

.main-menu > li > .sub-menu li::before {
  content: "▶";
  font-size: var(--font-size-xs);
  color: var(--red-600);
  position: absolute;
  top: 4px;
  left: 0;
}

.main-menu > li > .sub-menu > li > a {
  font-family: var(--secondary-font);
  font-size: var(--font-size-m);
  line-height: 1.5;
  color: var(--light-50);
  text-transform: uppercase;
}

.main-menu > li > .sub-menu > li > a:hover {
  color: var(--red-600);
}

#artgo-menu-socials {
  display: flex;
  gap: 20px;
}

#artgo-menu-socials a:hover svg rect:first-of-type {
  fill: var(--red-600);
}

/****************** INNER BLOCKS *****************/

/* Txt block */

.text-block {
  display: flex;
  justify-content: center;
  gap: 5vw;
  margin-bottom: var(--gutter-blocks);
}

.text-block__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gutter-blocks);
}

/* Title block */
.title-block {
  display: flex;
  justify-content: var(--title-block-alignement);
  margin-bottom: var(--gutter-blocks);
}

.title-block .artgo-h2 {
  align-items: var(--title-block-alignement);
  text-align: var(--title-block-alignement);
}

/* Btn block */

.btn-block {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gutter-blocks);
}

/* Text / img block */

.text-img-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 5vw;
  row-gap: var(--gutter-blocks);
  flex-wrap: wrap;
  flex-direction: var(--text-img-block-orientation);
  margin-bottom: var(--gutter-blocks);
}

.text-img-block__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.text-img-block__img {
  position: relative;
  flex: 1;
}

.text-img-block__img img {
  width: fit-content;
  margin: auto;
}

.text-img-block__img .video-block {
  margin-bottom: 0;
}

/* .text-img-block__img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 50px solid var(--light-50);
  border-right: 150px solid transparent;
  z-index: 1;
}
.text-img-block__img::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 50px solid var(--light-50);
  border-left: 150px solid transparent;
  z-index: 1;
}

.section-color .text-img-block__img::before {
  border-top-color: var(--blue-50);
}
.section-color .text-img-block__img::after {
  border-bottom-color: var(--blue-50);
} */

.text-img-block__tiles {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--gutter-blocks);
  height: auto;
  width: 100%;
  flex-wrap: wrap;
}

.text-img-block__tiles__item {
  max-width: 290px;
  width: 100%;
  padding: var(--gutter-blocks);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  background-color: var(--blue-50);
  font-family: var(--secondary-font);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0px 0px 30px 0px var(--blue-50);
}

.section-color .text-img-block__tiles__item {
  background-color: var(--light-50);
}

.text-img-block__tiles__item img {
  height: 40px;
  width: auto;
  margin-bottom: auto;
}

.text-img-block__tiles__item p {
  max-width: 195px;
  text-wrap: balance;
  text-transform: uppercase;
}

.section-color:has(.text-img-block:last-child .text-img-block__tiles) {
  padding-bottom: 0;
}

.section-color:has(.text-img-block:last-child .text-img-block__tiles)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: var(--light-50);
}

/* Video block */

.video-block {
  position: relative;
  aspect-ratio: 16/9;
  max-width: 900px;
  margin: 0 auto var(--gutter-blocks);
}

.video-block a,
.video-block iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-block iframe {
  border: 0;
}

.video-block a::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  height: 50px;
  width: 50px;
  background-color: var(--red-600);
  color: var(--light-50);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: 0.3s;
}
.video-block img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  filter: brightness(0.5);
  transition: 0.3s;
}

.video-block:hover a::before {
  height: 65px;
  width: 65px;
}

.video-block:hover img {
  filter: brightness(1);
}

/* Scrolling keywords */

.scrolling-keywords-block {
  position: relative;
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-bottom: var(--gutter-blocks);
}

.scrolling-keywords-block__content {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(30px, 5.208vw, 100px);
  transition: transform 0.1s cubic-bezier(0.15, 0.2, 0.1, 1);
}

.scrolling-keywords-block p {
  font-family: var(--secondary-font);
  font-size: clamp(38px, 7.81vw, 150px);
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--blue-300);
}

/* Keynumbers */

.keynumbers-block {
  display: flex;
  justify-content: center;
  gap: 5vw;
  flex-wrap: wrap;
}

.keynumbers-block__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.keynumbers-block__item__number {
  font-family: var(--secondary-font);
  font-size: clamp(80px, 7.81vw, 150px);
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--blue-300);
}

.keynumbers-block__item__number__value {
  display: inline-block;
  width: 200px;
}

.keynumbers-block__item__legend {
  font-family: var(--secondary-font);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.25;
}

.cards-block {
  display: flex;
  justify-content: center;
  gap: var(--gutter-blocks);
  flex-wrap: wrap;
  margin-bottom: var(--gutter-blocks);
}

.cards-block__item {
  flex: 1;
  min-width: 350px;
  background: url(assets/images/deco-logo.svg) no-repeat top 20px left 20px,
    var(--blue-50);
  padding: var(--gutter-blocks);
}

/* Timeline block */

.timeline-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gutter-blocks);
  margin-bottom: var(--gutter-blocks);
  padding: var(--gutter-blocks) 0;
}

.timeline-block::before {
  content: "";
  width: 1px;
  background-color: var(--blue-50);
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
}

.timeline-block__item {
  display: flex;
  justify-content: center;
  gap: 15px;
  text-align: end;
}

.timeline-block__item:nth-child(even) {
  flex-direction: row-reverse;
  text-align: left;
}

.timeline-block__item .content {
  max-width: 480px;
  flex: 3;
}

.timeline-block__item .content--active {
  display: flex;
  gap: 20px;
}

.timeline-block__item:nth-child(odd) .content--active {
  flex-direction: row-reverse;
}

.timeline-block__item__separator {
  flex: 1;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.timeline-block__item__separator svg {
  margin-top: -10px;
}

.timeline-block__item:nth-child(even) .timeline-block__item__separator svg {
  transform: rotate(180deg);
}

.timeline-block__item:nth-child(even) .timeline-block__item__separator {
  margin-left: auto;
}

.timeline-block__item:nth-child(odd) .timeline-block__item__separator {
  margin-right: auto;
}

.timeline-block__item__date {
  font-family: var(--secondary-font);
  color: var(--red-600);
  font-size: var(--font-size-h3);
  font-weight: 700;
  line-height: 1.5;
}

/* Gallery block */

.gallery-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-blocks);
  margin-bottom: var(--gutter-blocks);
}

.gallery-block__item {
  overflow: hidden;
  aspect-ratio: 480 / 300;
}

.gallery-block__item > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
}

.gallery-block__item:hover img {
  transform: scale(1.1);
  filter: brightness(0.5);
}

/* Lightboxes */

.sl-wrapper {
  z-index: 9999;
}

.sl-overlay {
  background: var(--blue-900);
  z-index: 9400;
}

.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button,
.sl-wrapper .sl-counter {
  color: var(--light-50);
}

.sl-next div,
.sl-prev div {
  background-color: var(--red-600);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  transition: 0.3s ease;
}

.sl-next div:hover,
.sl-prev div:hover {
  background-color: var(--red-900);
}

/* IMG block */

.img-block {
  margin-bottom: var(--gutter-blocks);
}

.img-block img {
  width: fit-content;
  margin: auto;
}

/* Btn block */

.btn-block {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gutter-blocks);
}

/* Faq block */

.faq-block {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--gutter-blocks);
}

.faq__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--blue-900);
}

.faq__item__question {
  font-size: var(--font-size-l);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: 0.3s ease;
  cursor: pointer;
  padding-right: 10px;
}

.faq__item__question::after {
  content: url(./assets/images/chevron.svg);
  transition: transform 0.3s ease;
}

.faq__item__question.active {
  color: var(--red-600);
}

.faq__item__question.active::after {
  transform: rotate(-180deg);
}

.faq__item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq__item__answer .content {
  margin-bottom: 20px;
  line-height: 1.75;
  transition: padding-top 0.3s ease;
}

.faq__item__question.active + .faq__item__answer .content {
  padding-top: 16px;
}

/* Form block */

.form-block {
  position: relative;
  max-width: 920px;
  margin: auto;
  margin-bottom: var(--gutter-blocks);
  padding: var(--gutter-blocks) clamp(16px, 5vw, 50px);
  background-color: var(--blue-50);
}

.form-block h2 {
  margin-bottom: var(--gutter-blocks);
}

.form-block .gform_wrapper .gfield_label {
  font-size: var(--font-size-l);
  color: var(--blue-900);
  font-weight: 600;
}

.form-block .gform_wrapper .gfield_required {
  display: inline-block;
  color: var(--blue-900);
}

.form-block .gform_wrapper .ginput_container_email input,
.form-block .gform_wrapper .ginput_container_text input,
.form-block .gform_wrapper .ginput_container_phone input,
.form-block .gform_wrapper .ginput_container_select select,
.form-block .gform_wrapper .ginput_container_website input,
.form-block .gform_wrapper .ginput_container_number input,
.form-block .gform_wrapper .ginput_container_date input,
.form-block .gform_wrapper .ginput_container_textarea textarea {
  background-color: transparent;
  outline: none;
  color: var(--blue-900);
  border: 1px solid var(--blue-900);
  padding: 15px 20px !important;
  font-size: var(--font-size-m);
  height: 55px;
}

.form-block .gform_wrapper .gfield_radio {
  flex-direction: row !important;
  gap: var(--gutter-blocks) !important;
}

.form-block .gform_wrapper .ginput_container_select select {
  padding: 10px 15px !important;
  cursor: pointer;
  background-image: url(./assets/images/chevron-dark.svg);
}

.form-block .gform_wrapper .ginput_container_select select > * {
  background-color: var(--light-50);
  color: var(--blue-900);
}

.form-block .gform_wrapper .ginput_container_textarea textarea {
  min-block-size: 150px !important;
}

.form-block .gform_wrapper .ginput_container_email input::placeholder,
.form-block .gform_wrapper .ginput_container_text input::placeholder,
.form-block .gform_wrapper .ginput_container_phone input::placeholder,
.form-block .gform_wrapper .ginput_container_website input::placeholder,
.form-block .gform_wrapper .ginput_container_date input::placeholder,
.form-block .gform_wrapper .ginput_container_number input::placeholder,
.form-block
  .gform_wrapper
  .ginput_container_select
  select
  option.gf_placeholder,
.form-block .gform_wrapper .ginput_container_textarea textarea::placeholder {
  opacity: 0.4;
  color: var(--blue-900);
}

.form-block .gform_wrapper .ginput_container_email input:focus,
.form-block .gform_wrapper .ginput_container_text input:focus,
.form-block .gform_wrapper .ginput_container_phone input:focus,
.form-block .gform_wrapper .ginput_container_website input:focus,
.form-block .gform_wrapper .ginput_container_number input:focus,
.form-block .gform_wrapper .ginput_container_date input:focus,
.form-block .gform_wrapper .ginput_container_select select:focus,
.form-block .gform_wrapper .ginput_container_textarea textarea:focus {
  outline: 2px solid var(--blue-300);
}

.form-block .gform_wrapper div.gform_drop_area {
  border: 1px dashed var(--blue-900);
  background: transparent;
  color: var(--blue-900);
}

.form-block .gform_wrapper div.gform_drop_area::before {
  color: var(--blue-900);
}

.form-block
  .gform_wrapper
  div.gform_drop_area
  button[type="button"].gform_button_select_files {
  background: transparent;
  color: var(--blue-900);
  text-transform: uppercase;
  border: 1px solid var(--blue-900);
  padding: 10px 20px;
  cursor: pointer;
}

.form-block
  .gform_wrapper
  div.gform_drop_area
  button[type="button"].gform_button_select_files:hover {
  background: var(--blue-900);
  color: var(--light-50);
}

.form-block .gform_wrapper span.gfield_description,
.form-block .gform_wrapper .ginput_preview span.gfield_fileupload_percent,
.form-block .gform_wrapper .ginput_preview span.gfield_fileupload_filename,
.form-block .gform_wrapper .ginput_preview span.gfield_fileupload_filesize,
.form-block
  .gform_wrapper
  div.ginput_preview
  button.gform_delete_file
  span.dashicons.dashicons-trash:before {
  color: var(--blue-900) !important;
}

.form-block
  .gform_wrapper
  .ginput_preview
  span.gfield_fileupload_progressbar_progress {
  background-color: var(--blue-800);
}

.grecaptcha-badge {
  display: none !important;
  visibility: hidden !important;
}

.form-block .gform_wrapper .ginput_container_consent input {
  accent-color: var(--red-600);
  width: 16px;
  height: 16px;
}

.form-block .gform_wrapper .gfield_consent_label {
  color: var(--blue-900);
}

.form-block .gform_wrapper .gform_footer.top_label .artgo-btn.artgo-btn--gform {
  font-family: var(--secondary-font);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  width: fit-content;
  background: transparent;
  gap: 0;
  padding: 0;
  margin: 0 auto;
}

.form-block
  .gform_wrapper
  .gform_footer.top_label
  .artgo-btn.artgo-btn--gform
  span {
  border: 1px solid var(--red-600);
  color: var(--blue-900);
  padding: 9px 20px;
  transition: color 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease;
}

.form-block
  .gform_wrapper
  .gform_footer.top_label
  .artgo-btn.artgo-btn--gform::before {
  content: url(assets/images/deco-btn.svg);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: var(--red-600);
  width: 40px;
  line-height: 1;
}

.form-block
  .gform_wrapper
  .gform_footer.top_label
  .artgo-btn.artgo-btn--gform:hover
  span {
  color: var(--light-50);
  background-color: var(--blue-900);
  border-color: var(--blue-900);
}

.form-block
  .gform_wrapper
  input[type="checkbox"]:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  )::before {
  color: var(--red-600);
}

.form-block .gform_wrapper .gform_fields {
  row-gap: 20px;
}

/* Partners block */

.partners-block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter-blocks);
}

.partners-block__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.partners-block__item__img {
  position: relative;
  padding: 20px;
  border: 1px solid transparent;
}

.partners-block__item__img img {
  position: relative;
  aspect-ratio: 250 / 130;
  object-fit: contain;
  /* filter: grayscale(1); */
  /* filter: brightness(0) saturate(100%) invert(20%) sepia(50%) saturate(1820%) hue-rotate(189deg) brightness(98%) contrast(96%); */
}

.partners-block__item p {
  opacity: 0;
  color: var(--light-50);
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  background-color: var(--blue-800);
  padding: 10px;
  width: 100%;
  text-wrap: balance;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.partners-block__item:hover .partners-block__item__img {
  border-color: var(--blue-800);
}

.partners-block__item:hover p {
  opacity: 1;
}

/* Contact block */

.contact-block {
  display: flex;
  gap: 5vw;
}

.contact-block__left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--gutter-blocks);
}

.contact-block__left a {
  color: var(--blue-900);
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 10px;
}

.contact-block__left a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.contact-block__left .map-link {
  font-style: italic;
}

.contact-block__left__adresses {
  display: flex;
  gap: 5vw;
  gap: var(--gutter-section);
}

.contact-map {
  max-width: 430px;
}

.contact-block__left__adresses__content {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.contact-block__right {
  width: 50%;
  display: flex;
}

/* Push pages block */

.push-pages-block {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-blocks);
  margin-bottom: var(--gutter-blocks);
}

.push-pages-block__top {
  display: flex;
  gap: 10vw;
}

.push-pages-block__top h2,
.push-pages-block__top .content {
  width: 50%;
}

.push-pages-block__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter-blocks);
}

.push-pages-block__grid__item {
  position: relative;
}

.push-pages-block__grid__item-mask {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/images/deco-logo.svg) no-repeat top 20px left 20px,
    var(--blue-900);
  background-blend-mode: soft-light, normal;
  opacity: 0.4;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
}

.push-pages-block__grid__item:hover .push-pages-block__grid__item-mask {
  opacity: 0.9;
}

.push-pages-block__grid__item::before,
.push-pages-block__grid__item::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 0;
  width: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}
.push-pages-block__grid__item::before {
  top: 0;
  left: 0;
  border-top: 50px solid var(--light-50);
  border-right: 150px solid transparent;
}
.push-pages-block__grid__item::after {
  bottom: 0;
  right: 0;
  border-bottom: 50px solid var(--light-50);
  border-left: 150px solid transparent;
}

.push-pages-block__grid__item:hover::before,
.push-pages-block__grid__item:hover::after {
  opacity: 1;
}

.push-pages-block__grid__item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.push-pages-block__grid__item__content {
  position: absolute;
  bottom: var(--gutter-blocks);
  left: var(--gutter-blocks);
}

.push-pages-block__grid__item__title {
  font-family: var(--secondary-font);
  color: var(--light-50);
  font-size: var(--font-size-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.push-pages-block__grid__item__title:hover {
  color: var(--red-600);
}

.push-pages-block__grid__item__content .content {
  max-height: 0;
  overflow: hidden;
}

.push-pages-block__grid__item:hover
  .push-pages-block__grid__item__content
  .content {
  max-height: 100vh;
  padding-top: 20px;
  transition: max-height 0.6s ease;
}

.push-pages-block__grid__item__content .content ul {
  padding-left: 0;
}

.push-pages-block__grid__item__content .content ul li::before {
  content: url(assets/images/puce.svg);
}

.push-pages-block__grid__item__content .content ul li a {
  color: var(--light-50);
  font-size: var(--font-size-xl);
  line-height: 1.5;
}

/* Push reas block */

.push-reas-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-blocks);
  margin-bottom: var(--gutter-blocks);
}

.push-reas-block__title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-around;
}

.listing-reas__item {
  position: relative;
  overflow: hidden;
}

.listing-reas__item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.listing-reas__item__content {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(13, 36, 68, 0.9);
  backdrop-filter: blur(2px);
  padding: 30px;
  max-width: 400px;
  transition: background-color 0.3s ease;
}

.listing-reas__item__content::after {
  content: url(assets/images/read-more-deco-light.svg);
  position: absolute;
  top: 0;
  left: 100%;
  width: 40px;
  line-height: 1;
}

.listing-reas__item__content p {
  font-family: var(--secondary-font);
  font-size: var(--font-size-l);
  font-weight: 700;
  line-height: 1.25;
  color: var(--light-50);
  transition: color 0.3s ease;
}

.listing-reas__item__content div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  background-color: var(--blue-300);
  color: var(--blue-900);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 1.4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: 10px;
  height: 20px;
  padding: 0 5px;
}

.listing-reas__item:hover .listing-reas__item__content {
  background-color: rgba(255, 255, 255, 0.9);
}

.listing-reas__item:hover .listing-reas__item__content::after {
  content: url(assets/images/read-more-deco.svg);
}

.listing-reas__item:hover .listing-reas__item__content p {
  color: var(--blue-900);
}

.listing-reas__item:hover .listing-reas__item__content div {
  max-height: 20px;
}

/* Listing sous pages */

.listing-subpages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter-blocks);
}

.listing-subpages__item {
  height: 300px;
  background: url(assets/images/deco-logo.svg) no-repeat center, var(--blue-900);
  color: var(--light-50);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--secondary-font);
  font-size: var(--font-size-h3);
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  padding: 16px;
  background-blend-mode: soft-light;
  transition: background 0.3s ease;
}

.listing-subpages__item:hover {
  background: url(assets/images/deco-logo.svg) no-repeat center, var(--red-600);
}

/* Listing posts  */

.listing-posts-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gutter-blocks);
  row-gap: var(--gutter-section);
  margin-bottom: var(--gutter-blocks);
}

.listing-posts-block__item {
  display: flex;
}

.listing-posts-block__item__img {
  width: 50%;
}

.listing-posts-block__item__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.listing-posts-block__item__content {
  width: 50%;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding: var(--gutter-blocks);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.listing-posts-block__item__content__date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--dark-950);
}

.listing-posts-block__item__content__date::before {
  content: "";
  height: 1px;
  width: 20px;
  background-color: var(--red-600);
}

.listing-posts-block__item__title {
  font-size: var(--font-size-l);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue-900);
}

.listing-posts-block__item .content {
  color: var(--blue-800);
  margin-bottom: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 5px 0 auto;
}

.listing-posts-block__item__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--red-600);
  font-weight: 600;
  height: 40px;
  width: fit-content;
}

.listing-posts-block__item__btn span {
  overflow: hidden;
  width: 0;
  text-wrap: nowrap;
  transition: width 0.3s ease;
}

.listing-posts-block__item__btn::before {
  content: url(assets/images/read-more-deco.svg);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: var(--red-600);
  width: 40px;
  line-height: 1;
}

.listing-posts-block__item:hover .listing-posts-block__item__content {
  border-color: var(--red-600);
}

.listing-posts-block__item:hover .listing-posts-block__item__btn span {
  width: 100%;
}

/* Pagination */

.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-pagenavi .current,
.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  color: var(--blue-900);
  font-weight: 400;
}

.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
  content: url(assets/images/arrow-nav.svg);
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid var(--blue-500);
}

.wp-pagenavi .nextpostslink:hover,
.wp-pagenavi .previouspostslink:hover {
  content: url(assets/images/arrow-menu-light.svg);
  background-color: var(--red-600);
  border-color: transparent;
}

.wp-pagenavi .previouspostslink {
  margin-right: 20px;
}
.wp-pagenavi .nextpostslink {
  transform: rotate(180deg);
  margin-left: 20px;
}

.wp-pagenavi span.current {
  color: var(--blue-500);
}

.wp-pagenavi a:not(:is(.previouspostslink, .nextpostslink)):hover {
  color: var(--red-600);
}

.wp-pagenavi a,
.wp-pagenavi span {
  text-decoration: none;
  border: none;
  padding: 3px 5px;
  margin: 2px;
}

/* Push post block */

.push-posts-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10vw;
  margin-bottom: var(--gutter-blocks);
}

/* Listing reas block */

.listing-reas-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: var(--gutter-blocks);
}

.listing-reas-filters form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.listing-reas-filters form input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.listing-reas-filters__label {
  font-size: var(--font-size-xs);
  letter-spacing: 1.4px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid var(--blue-300);
  text-transform: uppercase;
}

input:checked + .listing-reas-filters__label,
.listing-reas-filters__label:hover {
  background-color: var(--blue-300);
}

.listing-reas-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-blocks);
  margin-bottom: var(--gutter-blocks);
}

/****************** SINGLE *****************/

#single-post section:first-of-type {
  padding-bottom: 0;
}

#single-post .artgo-h1 {
  color: var(--blue-900);
  text-align: left;
  margin: var(--gutter-blocks) auto;
}

#single-post .top-page__breadcrumb {
  justify-content: flex-start;
  color: var(--blue-900);
}

#single-post .top-page__breadcrumb span a {
  color: var(--blue-900);
}

.single-rea-top {
  display: flex;
  gap: var(--gutter-blocks);
  margin-top: var(--gutter-section);
}

.single-rea-top__left {
  width: 50%;
  max-width: 620px;
}

.single-rea-top__left__imgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--gutter-section);
}

.single-rea-top__left__imgs img {
  aspect-ratio: 62 / 45;
  object-fit: cover;
}

.single-rea-top__left__imgs__thumbs {
  display: flex;
  padding-bottom: 10px;
  overflow-x: auto;
}

.single-rea-top__left__imgs__thumbs div {
  display: flex;
  gap: 10px;
  height: min-content;
}

.single-rea-top__left__imgs__thumbs a {
  width: 232px;
  height: auto;
}

.single-rea-top__left__imgs__thumbs a img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.single-rea-top__right {
  width: 50%;
}

/****************** FOOTER *****************/

footer {
  display: flex;
  flex-direction: column;
  background-color: var(--blue-900);
  color: var(--light-50);
  font-size: var(--font-size-m);
  text-wrap: balance;
}

footer::before {
  content: "";
  height: 55px;
  background-image: url(assets/images/footer-bg.svg);
}

footer a:not(.artgo-btn) {
  color: var(--light-50);
}

footer a:not(.artgo-btn):hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

footer .artgo-btn span {
  color: var(--light-50);
}

footer .artgo-btn:hover span {
  border-color: var(--light-50);
  color: var(--blue-900);
  background-color: var(--light-50);
}

.footer-content {
  padding: var(--gutter-blocks) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 30px;
}

.footer-col--right {
  align-items: flex-end;
  text-align: left;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a:hover svg rect:first-of-type {
  fill: var(--red-600);
}

.bottom-bar {
  padding-bottom: 20px;
}

.bottom-bar ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--font-size-xs);
}

/****************** RESPONSIVE *****************/

@media only screen and (max-width: 1279px) {
  .listing-posts-block {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gutter-blocks);
  }
  .listing-subpages {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 1023px) {
  .header-top__top-menu {
    display: none;
  }
  .text-img-block {
    flex-direction: column;
    align-items: unset;
    flex-wrap: nowrap;
  }
  .push-reas-block {
    grid-template-columns: repeat(2, 1fr);
  }
  .listing-reas-block {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-block {
    flex-direction: column;
    gap: var(--gutter-blocks);
  }
  .contact-block__left {
    width: 100%;
    align-items: center;
  }
  .contact-block__right {
    width: 100%;
  }
  .single-rea-top {
    flex-direction: column;
  }
  .single-rea-top__left,
  .single-rea-top__right {
    max-width: 100%;
    width: 100%;
  }
  .single-rea-top__left__imgs {
    margin-bottom: 0;
  }
  .single-rea-top__left,
  .single-rea-top__right {
    margin-bottom: var(--gutter-blocks);
  }
}

@media only screen and (max-width: 767px) {
  .main-menu {
    columns: unset;
  }
  .top-page-home__content {
    flex-direction: column;
  }
  .push-pages-block__top {
    gap: var(--gutter-blocks);
    flex-direction: column;
  }
  .push-pages-block__top h2,
  .push-pages-block__top .content {
    width: 100%;
  }
  .push-pages-block__grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .text-img-block__tiles__item {
    max-width: 100%;
  }
  .push-reas-block {
    grid-template-columns: repeat(1, 1fr);
  }
  .push-posts-block {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--gutter-blocks);
  }
  .listing-posts-block__item__img {
    display: none;
  }
  .listing-posts-block__item__content {
    width: 100%;
    padding: 10px;
    border-left: 1px solid transparent;
  }
  .partners-block {
    grid-template-columns: repeat(2, 1fr);
  }
  .listing-subpages {
    grid-template-columns: repeat(2, 1fr);
  }
  .listing-reas-block {
    grid-template-columns: repeat(1, 1fr);
  }
  .footer-content {
    flex-direction: column;
    gap: var(--gutter-blocks);
  }
}

@media only screen and (max-width: 575px) {
  body::before {
    background: var(--blue-900);
  }
  .top-page {
    width: 100%;
    background-color: var(--blue-900);
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .top-page-home::after {
border-bottom: 10vh solid var(--light-50);
  }
  .top-page-home__content__img {
    display: none;
  }
  .timeline-block__item:nth-child(odd),
  .timeline-block__item:nth-child(even) {
    flex-direction: row-reverse;
  }
  .timeline-block__item .content:not(.content--active) {
    display: none;
  }
  .timeline-block__item .timeline-block__item__separator svg {
    transform: rotate(180deg);
  }
  .timeline-block__item__separator {
    flex: unset;
  }
  .timeline-block__item {
    text-align: left;
  }
  .timeline-block__item .content {
    max-width: 100%;
  }
  .timeline-block__item .content--active {
    display: block;
  }
  .gallery-block {
    grid-template-columns: repeat(2, 1fr);
  }
  .listing-subpages {
    grid-template-columns: repeat(1, 1fr);
  }
  .listing-reas-filters form {
    flex-direction: column;
  }
  .listing-reas-filters__label {
    width: 100%;
  }
  .push-pages-block__grid__item-mask {
    opacity: 1;
    z-index: 1;
  }
  .push-pages-block__grid__item:hover::before,
  .push-pages-block__grid__item:hover::after {
    display: none;
  }

  .push-pages-block__grid__item {
    padding: var(--gutter-blocks) 20px;
  }

  .push-pages-block__grid__item img {
    position: absolute;
    inset: 0;
  }

  .push-pages-block__grid__item__content {
    position: relative;
    inset: unset;
    z-index: 2;
  }

  .push-pages-block__grid__item__content .content ul li a {
    font-size: var(--font-size-m);
  }
  .push-pages-block__grid__item__content .content {
    max-height: 100%;
    overflow: visible;
    padding-top: 20px;
  }
}