:root {}


/* === HELPERS === */
body {
    font-size: 1.125rem;
    line-height: 1.95;
    font-weight: 300;
    background-color: var(--background);
    /* overflow: hidden; */
    max-width: 2560px;
}
.container-xxl {
    max-width: 1800px;
}



/* === NAV === */
.nav-sticky {
    padding: 0;
    background-color: var(--black);
    border: none;
}
@media screen and (min-width: 1400px) {
    .nav-sticky {
        background-color: transparent;
    }
}
.nav-sticky.has-scrolled {
    background-color: var(--black);
}
@media screen and (min-width: 1200px) {
    .nav-sticky.has-scrolled {
        background-color: transparent;
    }
}
.nav-sticky.has-scrolled:hover {
    background-color: transparent;
}
nav .content {
    padding-right: 0;
    padding-left: 0;
}
@media screen and (min-width: 1680px) {
    nav .content .nav-content {
        flex: 0 0 auto;
        width: 1400px;
    }
}
nav .content .logo {
    padding: var(--spacer);
    background-color: var(--black);
}
nav .content .logo img {
	max-height: 35px;
    height: 35px;
}
nav .content ul#menu-menu-primary.menu,
nav .content ul#menu-menu-primary-anglais.menu {
    margin-left: calc(var(--spacer) * -1);
    flex: auto;
}
nav .content ul.menu > li {
    background-color: var(--background);
    justify-content: center;
}
nav .content ul.menu > li:not(.colored, .phone) a {
    padding: 0 calc(var(--spacer) * .5);
}
nav .content ul.menu > li > a {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    height: 100%;
}
nav .content ul.menu > li:first-child > a {
    padding-left: var(--spacer);
}
nav .content ul.menu > li > a .menu-title {
    position: relative;
}
nav .content ul.menu > li:not(.colored, .phone) > a .menu-title::after {
    content: '';
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    width: 0;
    height: .063rem;
    background: var(--text);
    transition: width .350s cubic-bezier(.19,1,.22,1);
    -webkit-transition: width .350s cubic-bezier(.19,1,.22,1);
}
nav .content ul.menu > li:not(.colored, .phone) > a:hover .menu-title::after,
nav .content ul.menu > li:not(.colored, .phone).current-menu-item > a .menu-title::after {
    left: 0;
    width: 100%;
}
nav .content ul.menu > li.phone > a .menu-title::before {
    content: '';
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    width: 0;
    height: .063rem;
    background: var(--text);
    transition: width .350s cubic-bezier(.19,1,.22,1);
    -webkit-transition: width .350s cubic-bezier(.19,1,.22,1);
}
nav .content ul.menu > li.phone > a:hover .menu-title::before {
    left: 0;
    width: 100%;
}
nav .content ul.menu > li.add-pr > a {
    padding-right: var(--spacer);
}
nav .content ul.menu li:hover a {
    color: var(--text);
}
nav .content ul.menu > li.colored.light {
    background-color: var(--primary-hover);
}
nav .content ul.menu > li.colored {
    background-color: var(--primary);
    min-width: 130px;
    flex: auto;
    justify-content: center;
    transition: var(--transition);
}
@media screen and (min-width: 1400px) {
    nav .content ul.menu > li.colored {
        min-width: 160px;
    }
}
@media screen and (min-width: 1440px) {
    nav .content ul.menu > li.colored {
        min-width: 203px;
    }
}
@media screen and (min-width: 1680px) {
    nav .content ul.menu > li.colored {
        min-width: 183px;
    }
}
nav .content ul.menu > li.colored:hover {
    background-color: var(--primary-light);
}
nav .content ul.menu > li.colored a {
    background: none;
    margin: 0;
    padding: 0!important;
    height: 100%;
    border-radius: 0;
    font-weight: 400;
}
nav .content ul.menu > li.colored:hover a {
    color: var(--white);
}
nav .content ul.menu > li.colored a .menu-title {
    position: relative;
    display: flex;
    align-items: center;
}
@media screen and (min-width: 1440px) {
    nav .content ul.menu > li.colored a .menu-title::before {
        content: '';
        display: block;
        background-image: url('https://www.laplage-dargent.com/wp-content/themes/slab/asset/img/icon-bubble.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: var(--spacer);
        height: calc(var(--spacer) * .75);
        margin-right: calc(var(--spacer) * .5);
        transition: var(--transition);
    }
    nav .content ul.menu > li.colored.light a .menu-title::before {
        background-image: url('https://www.laplage-dargent.com/wp-content/themes/slab/asset/img/icon-resa.svg');
    }
}
nav .content ul.menu > li.colored:hover a {
    background: none;
}
nav .content ul.menu > li.phone {
    background-color: var(--white);
    padding-right: calc(var(--spacer) * .5);
}
@media screen and (min-width: 1440px) {
    nav.translated .content ul.menu > li.phone a {
        padding-right: 0;
    }
    nav.not-translated .content ul.menu > li.phone a {
        padding-right: calc(var(--spacer) * .5);
    }
}
nav .content ul.menu > li.phone a .menu-title {
    position: relative;
}
nav.translated .content ul.menu > li.phone a .menu-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(100% + calc(var(--spacer) * .5));
    width: 1px;
    height: 100%;
    background-color: var(--text);
}
@media screen and (min-width: 1400px) {
    nav.translated .content ul.menu > li.phone a .menu-title::after {
        left: calc(100% + calc(var(--spacer) * .75));
    }
}
nav .content .lang-selector {
    min-width: 135px;
    background-color: var(--white);
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: center;
}
nav .content .lang-selector ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: -2px;
}
nav .content .lang-selector ul li {}
nav .content .lang-selector ul li::after {
    content: "|";
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    position: relative;
    top: -2px;
}
nav .content .lang-selector ul li:last-child::after {
    content: "";
}
nav .content .lang-selector ul li a {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    opacity: 0.65;
}
nav .content .lang-selector ul li.wpml-ls-current-language a {
    opacity: 1;
}
nav .content .lang-selector ul li a img {
    width: 18px;
    height: 10px;
    margin: 0px 5px;
}
nav .content .lang-selector ul li a span {}


.nav-burger {
    background-color: var(--background);
    transition: var(--transition);
}
@media screen and (min-width: 768px) {
    .nav-burger {
        padding: 0 var(--spacer-xl);
    }
}
.nav-burger.active {
    background-color: var(--black);
}
.nav-burger .burger span {
    background-color: var(--text);
}
.nav-burger.active .burger span {
    background-color: var(--white);
}


/* === NAV-RESPONSIVE === */
.nav-responsive {
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% - 83px);
    background: var(--black);
    z-index: 900;
}
@media screen and (min-width: 768px) {
    .nav-responsive {
        max-width: 100%;
    }
}
.nav-responsive.active {
    top: 83px;
}
.nav-responsive .content {
    height: 100%;
}
.nav-responsive .content .grid-menus {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.nav-responsive .content .grid-menus .menu-right {
    display: flex;
    flex-direction: column;
}
.nav-responsive .content .grid-menus .menu-right .socials-list {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: auto;
    gap: var(--spacer);
}
.nav-responsive .content .grid-menus .menu-right .socials-list .social-item {
    font-size: var(--font-size-xs);
    color: var(--white);
}
.nav-responsive .content ul.menu li a {
    font-size: var(--font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 var(--spacer);
}
.nav-responsive .content ul.menu li:last-child a {
    margin-bottom: 0;
}
.nav-responsive .content ul.menu li.current-menu-item > a {
    color: var(--white);
}
.nav-responsive .content ul.menu li a .menu-title {
    position: relative;
}
.nav-responsive .content ul.menu li.current-menu-item > a .menu-title::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: .063rem;
    background-color: var(--white);
}
.nav-responsive .content ul#menu-contact-responsive-menu li a {
    justify-content: flex-end;
}
.nav-responsive .content .infos-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacer) * .5);
    color: var(--dark);
    margin-top: var(--spacer-xl);
}
.nav-responsive .content .infos-contact a {
    color: var(--dark);
}
.nav-responsive .content .cta-reservation {
    display: flex;
    justify-content: center;
    margin: var(--spacer-xl) 0;
}
.nav-responsive .content .cta-reservation .btn {
    border-radius: 0;
    padding: calc(var(--spacer) * 1.75);
    min-width: inherit;
    justify-content: center;
}
.nav-responsive .lang-selector ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer);
    margin: var(--spacer) 0;
    padding: 0px;
    position: relative;
}
.nav-responsive  .lang-selector ul li a {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    opacity: 0.65;
}
.nav-responsive .lang-selector ul li.wpml-ls-current-language a {
    opacity: 1;
}
.nav-responsive .lang-selector ul li:not(:last-child)::after {
    content: "|";
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--white);
    position: relative;
    top: -2px;
    right: -.75rem;
}
.nav-responsive .lang-selector ul li a img {
    width: 18px;
    height: 10px;
    margin: 0px 5px;
}
.nav-responsive .content .legal-menu {
    margin-top: var(--spacer);
}
.nav-responsive .content .legal-menu .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* === BTN === */
.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacer) * .5);
    width: max-content;
    min-width: 310px;
    padding: var(--spacer) calc(var(--spacer) * 1.5);
    font-size: .688rem;
    font-weight: 400;
    line-height: 1.37;
    text-transform: uppercase;
}
.btn .btn-content {
    display: flex;
    align-items: center;
    gap: calc(var(--spacer) * .5);
}
.btn .resa-icon {
    width: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn .resa-icon svg {
    fill: currentColor;
    width: 100%;
}
.btn .icon {
    width: 0.875rem;
    margin-left: calc(var(--spacer) * .75);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn .icon svg {
    object-fit: contain;
    width: 100%;
    fill: currentColor;
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}
.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--white);
}
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--white);
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    color: var(--white);
}
.btn-black {
    background-color: var(--black);
    color: var(--white);
}
.btn-black:hover,
.btn-black:active,
.btn-black:focus {
    background-color: var(--black-hover);
    color: var(--white);
}

/* === GRID === */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.75rem;
}
@media screen and (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
        /* grid-template-rows: minmax(80px, 1fr); */
        /* grid-template-rows: minmax(80px, auto); */
        column-gap: var(--spacer);
        row-gap: var(--spacer-xxl);
    }
}

/* === ACTION === */
.grid .action {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 768px) {
    .grid .action {
        justify-content: flex-start;
    }
}


/* === IMG === */
.img-container {}
.img-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* === TITLE === */
.title {
    font-family: var(--font-family-serif);
    font-size: clamp(2.88rem, calc(2.51rem + 1.54vw), 4.25rem);
    /* font-size: clamp(3.00rem, calc(2.67rem + 1.40vw), 4.25rem); */
    /* font-size: clamp(2.88rem, calc(2.33rem + 2.33vw), 4.25rem); */
    font-weight: 200;
    line-height: 1.0625;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 0;
}


/* === EDITOR === */
.editor ul li::marker,
.editor ol li::marker {
    color: var(--text);
}



/* === COL-HEADER === */
.col-header {
    margin-bottom: 6.25rem;
}

.header-1 {
    margin-top: -83px;
    position: relative;
}
@media screen and (min-width: 1200px) {
    .header-1 {
        min-height: 100vh;
    }
}
.header-1 .grid {}
@media screen and (min-width: 768px) {
    .header-1 .grid {
        grid-template-rows: minmax(80px, 1fr);
    }
}
.header-1 .deco {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
}
@media screen and (min-width: 768px) {
    .header-1 .deco {
        grid-column: 1 / span 6;
        grid-row: 1 / span 2;
        margin-right: 0;
    }
}
@media screen and (min-width: 1200px) {
    .header-1 .deco {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        margin-left: 0;
    }
}
.header-1 .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .header-1 .content {
        grid-row: 1 / span 1;
        grid-column: 7 / span 6;
        display: grid;
        align-content: end;
        text-align: start;
        padding-top: calc(100px + var(--spacer-xxl));
    }
}
@media screen and (min-width: 1200px) {
    .header-1 .content {
        grid-column: 7 / span 5;
        padding-left: var(--spacer-xl);
        min-height: calc(100vh - 72px - var(--spacer-xxl));
    }
}
.header-1 .content .uppertitle {
    font-size: .875rem;
    line-height: 1.37;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1rem;
}
.header-1 .content .title {}
.header-1 .content .stars {
    display: flex;
    align-items: center;
    margin-block: var(--spacer) var(--spacer-xl);
}
.header-1 .content .stars .star {
    object-fit: contain;
    width: var(--spacer-xl);
    height: var(--spacer-xl);
}
.header-1 .content .scroll-down {
    display: none;
}
@media screen and (min-width: 768px) {
    .header-1 .content .scroll-down {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid var(--gray-dark);
		margin-top: var(--spacer);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-1 .content .scroll-down .arrow {
        width: 20%;
    }
    .header-1 .content .scroll-down .arrow svg {
        fill: var(--gray-dark);
    }
}
.header-1 .infos {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
    background-color: var(--black);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (min-width: 768px) {
    .header-1 .infos {
        grid-row: 2 / span 1;
        grid-column: 7 / span 6;
        margin-left: calc(var(--spacer) * -1);
    }
}
@media screen and (min-width: 1200px) {
    .header-1 .infos {
        grid-column: 7 / span 6;
        margin-right: 0;
    }
}
@media screen and (min-width: 1400px) {
    .header-1 .infos {
        grid-column: 7 / span 6;
        margin-right: 0;
    }
}
@media screen and (min-width: 1680px) {
    .header-1 .infos {
        grid-column: 7 / span 5;
    }
}
.header-1 .infos .dates {
    width: 100%;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    text-align: center;
    padding: var(--spacer) 0;
}
.header-1 .infos .socials-list {
    display: none;
}
@media screen and (min-width: 1200px) {
    .header-1 .infos .socials-list {
        display: flex;
        align-items: center;
        gap: var(--spacer);
        padding: var(--spacer) var(--spacer-xl);
        background-color: var(--black-hover);
    }
}
@media screen and (min-width: 768px) {
    .header-1 .infos .socials-list {
        padding: var(--spacer) var(--spacer-xl);
    }
    .header-1 .infos .socials-list .social-item {
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        color: var(--white);
    }
}

/* === HEADER-2 === */
.header-2 {
    margin: 6.25rem 0;
}
@media screen and (min-width: 1200px) {
    .header-2 {
        margin: 8.75rem 0 calc(var(--spacer-xxl) * 2);
    }
}
.header-2 .content {
    text-align: center;
}
@media screen and (min-width: 768px) {
    .header-2 .content {
        grid-column: 2 / span 10;
        grid-row: 1 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .header-2 .content {
        grid-column: 4 / span 6;
    }
}
.header-2 .content .title {
    font-size: clamp(3.00rem, calc(2.01rem + 4.21vw), 6.75rem);
    /* font-size: clamp(3.00rem, calc(1.51rem + 6.35vw), 6.75rem); */
    margin-bottom: 0;
}
.header-2 .content .editor {
    margin: var(--spacer-xl) 0;
}
.header-2 .content .action {
    display: flex;
    justify-content: center;
    margin-top: var(--spacer-xl);
}
.header-2 .deco {
    aspect-ratio: 4/3;
    margin-top: 3.75rem;
}
@media screen and (min-width: 768px) {
    .header-2 .deco {
        aspect-ratio: 21/9;
        margin-top: var(--spacer-xxl);
    }
}


/* === HEADER-3 === */
.header-3 {
    position: relative;
}
@media screen and (min-width: 768px) {
    .header-3 {
        margin-top: -100px;
    }
}
@media screen and (min-width: 1200px) {
    .header-3 {
        min-height: 100vh;
    }
}
.header-3 .content {
    display: grid;
    align-content: center;
    justify-items: center;
    padding-top: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .header-3 .content {
        padding-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    .header-3 .content {
        padding-top: calc(100px + var(--spacer-xxl));
        padding-bottom: var(--spacer-xxl);
        min-height: 100vh;
    }
}
.header-3 .content .title {
    font-size: clamp(3.00rem, calc(2.01rem + 4.21vw), 6.75rem);
    text-align: center;
    margin-bottom: var(--spacer-xl);
}
.header-3 .content .editor {
    text-align: center;
    padding: 0 var(--spacer);
}
@media screen and (min-width: 1200px) {
    .header-3 .content .editor {
        padding: 0 var(--spacer-xxl);
    }
}
.header-3 .content .action {
    display: flex;
    justify-content: center;
}
.header-3 .content .scroll-down {
    display: none;
}
@media screen and (min-width: 768px) {
    .header-3 .content .scroll-down {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid var(--gray-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: var(--spacer-xl);
    }
    .header-3 .content .scroll-down .arrow {
        width: 20%;
    }
    .header-3 .content .scroll-down .arrow svg {
        fill: var(--gray-dark);
    }
}
.header-3.img-left {}
.header-3.img-left .deco {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
    aspect-ratio: 16/9;
}
@media screen and (min-width: 768px) {
    .header-3.img-left .deco {
        grid-row: 1 / span 1;
        grid-column: 1 / span 12;
    }
}
@media screen and (min-width: 1200px) {
    .header-3.img-left .deco {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        margin: 0;
    }
}
.header-3.img-left .content {}
@media screen and (min-width: 768px) {
    .header-3.img-left .content {
        grid-row: 2 / span 1;
        grid-column: 1 / span 12;
    }
}
@media screen and (min-width: 1200px) {
    .header-3.img-left .content {
        grid-row: 1 / span 1;
        grid-column: 7 / span 6;
    }
}

.header-3.img-right {}
.header-3.img-right .deco {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
    aspect-ratio: 16/9;
}
@media screen and (min-width: 768px) {
    .header-3.img-right .deco {
        grid-row: 2 / span 1;
        grid-column: 1 / span 12;
    }
}
@media screen and (min-width: 1200px) {
    .header-3.img-right .deco {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        margin: 0;
    }
}
.header-3.img-right .content {}
@media screen and (min-width: 768px) {
    .header-3.img-right .content {
        grid-row: 1 / span 1;
        grid-column: 1 / span 12;
        padding-top: calc(100px + var(--spacer-xl));
    }
}
@media screen and (min-width: 1200px) {
    .header-3.img-right .content {
        grid-row: 1 / span 1;
        grid-column: 2 / span 4;
        padding: calc(100px + var(--spacer-xxl)) 0 var(--spacer-xxl);
    }
    .header-3.img-right .content .editor {
        padding: 0;
    }
}





/* === COL-LAYOUT === */
.col-layout {
    margin: 6.25rem 0;
    overflow: hidden;
}
@media screen and (min-width: 1200px) {
    .col-layout {
        margin: 12.5rem 0;
    }
}
.col-layout.layout-4 + .col-layout {}
@media screen and (min-width: 1200px) {
    .col-layout.layout-4 + .col-layout {
        margin-top: -6.25rem;
    }
}

/* === LAYOUT-1 === */
.layout-1 .grid {}
.layout-1 .grid .title {
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px){
    .layout-1 .grid .title {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px){
    .layout-1 .grid .title {
        grid-column: 2 / span 3;
    }
}
.layout-1 .grid .content {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1 .grid .content {
        grid-column: 1 / span 5;
        grid-row: 2 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1 .grid .content {
        grid-column: 2 / span 3;
        grid-row: 2 / span 1;
    }
}
.layout-1.alt .grid .title {
    font-size: var(--font-size-xxl);
}
@media screen and (min-width: 1600px) {
    .layout-1.alt .grid .title {
        font-size: var(--font-size-xxxl);
    }
}
.layout-1 .grid .content-secondary {
    grid-row: 6 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1 .grid .content-secondary {
        grid-column: 7 / span 6;
        grid-row: 5 / span 2;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1 .grid .content-secondary {
        grid-column: 6 / span 3;
        grid-row: 5 / span 2;
    }
}
.layout-1 .grid .img-container.classic {
    grid-row: 7 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1 .grid .img-container.classic {
        grid-row: 4 / span 2;
        grid-column: 1 / span 5;
    }
    .layout-1.alt .grid .img-container.classic {
        grid-row: 4 / span 2;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1 .grid .img-container.classic {
        grid-row: 4 / span 2;
        grid-column: 2 / span 3;
    }
}
.layout-1 .grid .img-container.vertical-1 {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1 .grid .img-container.vertical-1 {
        grid-row: 2 / span 3;
        grid-column: 7 / span 3;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1 .grid .img-container.vertical-1 {
        grid-row: 1 / span 4;
        grid-column: 6 / span 3;
    }
}
.layout-1 .grid .img-container.vertical-2 {
    grid-row: 5 / span 1;
    margin-top: calc(var(--spacer) * -1.5);
}
@media screen and (min-width: 768px) {
    .layout-1 .grid .img-container.vertical-2 {
        grid-row: 2 / span 3;
        grid-column: 10 / span 3;
        margin-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1 .grid .img-container.vertical-2 {
        grid-row: 1 / span 4;
        grid-column: 9 / span 3;
    }
}
.layout-1 .grid .action {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 1 / span 5;
    }
    .layout-1.alt .grid .action {
        grid-row: 3 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 2 / span 4;
    }
}


.layout-1.with-uppertitle {}
.layout-1.with-uppertitle .uppertitle {
    font-size: .875rem;
    line-height: 1.37;
    text-transform: uppercase;
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .uppertitle {
        grid-column: 1 / span 6;
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1.with-uppertitle .uppertitle {
        grid-row: 1 / span 1;
        grid-column: 2 / span 3;
    }
}
.layout-1.with-uppertitle .title {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 1200px) {
    .layout-1.with-uppertitle .title {
        grid-row: 2 / span 1;
    }
}
.layout-1.with-uppertitle .content {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .content {}
}
@media screen and (min-width: 1200px) {
    .layout-1.with-uppertitle .content {
        grid-row: 3 / span 1;
    }
}
.layout-1.with-uppertitle .action.action-1 {
    grid-row: 4 / span 1;
}
.layout-1.with-uppertitle .content-secondary {
    grid-row: 7 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .content-secondary {
        grid-row: 6 / span 3;
    }
}
.layout-1.with-uppertitle .content-secondary .title {
    margin-bottom: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .content-secondary .title {
        margin-bottom: var(--spacer-xxl);
    }
}
.layout-1.with-uppertitle .content-secondary .action {
    margin-top: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .content-secondary .action {
        margin-top: var(--spacer-xxl);
    }
}
.layout-1.with-uppertitle .img-container.classic {
    grid-row: 8 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .img-container.classic {
        grid-row: 5 / span 2;
    }
}
.layout-1.with-uppertitle .img-container.vertical-1 {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .img-container.vertical-1 {
        grid-row: 3 / span 3;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1.with-uppertitle .img-container.vertical-1 {
        grid-row: 1 / span 5;
    }
}
.layout-1.with-uppertitle .img-container.vertical-2 {
    grid-row: 6 / span 1;
    margin-top: calc(var(--spacer) * -1.5);
}
@media screen and (min-width: 768px) {
    .layout-1.with-uppertitle .img-container.vertical-2 {
        grid-row: 3 / span 3;
        margin-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    .layout-1.with-uppertitle .img-container.vertical-2 {
        grid-row: 1 / span 5;
    }
}

.layout-1.no-content-secondary .img-container.classic {
    grid-row: 6 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-1.no-content-secondary .img-container.classic {
        grid-row: 4 / span 2;
    }
}



/* === LAYOUT-2 === */
.layout-2 {}
.layout-2 .grid {}
.layout-2 .grid .title {
    margin-bottom: 0;
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-2 .grid .title {
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .layout-2 .grid .title {
        grid-column: 2 / span 4;
        grid-row: 2 / span 1;
    }
}
.layout-2 .grid .content {}
@media screen and (min-width: 1200px) {
    .layout-2 .grid .content {
        padding-right: var(--spacer);
    }
}
@media screen and (min-width: 1400px) {
    .layout-2 .grid .content {
        padding-right: var(--spacer-xl);
    }
}
.layout-2 .grid .content.left {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-2 .grid .content.left {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .layout-2 .grid .content.left {
        grid-column: 2 / span 3;
        grid-row: 3 / span 1;
    }
}
.layout-2 .grid .content.right {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-2 .grid .content.right {
        grid-row: 4 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .layout-2 .grid .content.right {
        grid-row: 3 / span 1;
        grid-column: 5 / span 3;
    }
}
.layout-2 .grid .action {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-2 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .layout-2 .grid .action {
        grid-row: 4 / span 1;
        grid-column: 5 / span 3;
    }
}
.layout-2 .grid .img-container {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-2 .grid .img-container {
        grid-row: 2 / span 3;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .layout-2 .grid .img-container {
        grid-row: 1 / span 5;
        grid-column: 8 / span 4;
    }
}



/* === LAYOUT-3 === */
.layout-3 {}
.layout-3 .grid {}
.layout-3 .grid .title {
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .title {
        grid-column: 1 / span 9;
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .title {
        grid-column: 2 / span 4;
    }
}
.layout-3 .grid .content {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .content {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .content {
        grid-column: 2 / span 3;
        grid-row: 2 / span 2;
    }
}
.layout-3 .grid .content .action {
    margin-top: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .content .action {
        margin-top: var(--spacer-xxl);
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .content .action {
        padding-left: 0;
    }
}
.layout-3 .grid .content-secondary {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .content-secondary {
        grid-column: 1 / span 5;
        grid-row: 4 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .content-secondary {
        grid-row: 2 / span 2;
        grid-column: 5 / span 3;
        padding-left: var(--spacer);
    }
}
@media screen and (min-width: 1400px) {
    .layout-3 .grid .content-secondary {
        padding-left: var(--spacer-xl);
    }
}
.layout-3 .grid .action {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .action {
        grid-column: 1 / span 5;
        grid-row: 5 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .action {
        grid-column: 5 / span 3;
        grid-row: 4 / span 1;
        padding-left: var(--spacer);
    }
}
@media screen and (min-width: 1400px) {
    .layout-3 .grid .action {
        padding-left: var(--spacer-xl);
    }
}
.layout-3 .grid .img-container.classic {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .img-container.classic {
        grid-column: 1 / span 5;
        grid-row: 3 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .img-container.classic {
        grid-column: 2 / span 3;
        grid-row: 3 / span 3;
        margin-top: 200px;
    }
}
.layout-3 .grid .img-container.vertical {
    grid-row: 6 / span 1;
    margin-top: calc(var(--spacer) * -1.5);
}
@media screen and (min-width: 768px) {
    .layout-3 .grid .img-container.vertical {
        grid-column: 7 / span 6;
        grid-row: 2 / span 4;
        margin-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    .layout-3 .grid .img-container.vertical {
        grid-column: 9 / span 3;
        grid-row: 2 / span 5;
        margin-top: calc(var(--spacer-xxl) * -1);
    }
}


.layout-3.with-title-2 .grid .content {}
@media screen and (min-width: 1200px) {
    .layout-3.with-title-2 .grid .content {
        grid-row: 2 / span 1;
    }
}
.layout-3.with-title-2 .grid .content-secondary {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 1200px) {
    .layout-3.with-title-2 .grid .content-secondary {
        grid-row: 2 / span 2;
    }
}
.layout-3.with-title-2 .grid .content-secondary .title {
    margin-bottom: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .layout-3.with-title-2 .grid .content-secondary .title {
        margin-bottom: var(--spacer-xxl);
    }
}
.layout-3.with-title-2 .grid .action {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 1200px) {
    .layout-3.with-title-2 .grid .action {
        grid-row: 4 / span 1;
    }
}
@media screen and (min-width: 1920px) {
    .layout-3.with-title-2 .grid > .action {
        margin-top: calc(var(--spacer-xxl) * -1);
    }
}
.layout-3.with-title-2 .grid .img-container.classic {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 1200px) {
    .layout-3.with-title-2 .grid .img-container.classic {
        grid-row: 3 / span 1;
    }
}
.layout-3.with-title-2 .grid .img-container.vertical {}
@media screen and (min-width: 1200px) {
    .layout-3.with-title-2 .grid .img-container.vertical {
        grid-row: 2 / span 4;
        margin-top: var(--spacer-xxl);
    }
}



/* === LAYOUT-4 === */
.layout-4 {
    background-color: var(--secondary-hover);
    color: var(--white);
}
@media screen and (min-width: 768px) {
    .layout-4 {
        background-color: transparent;
    }
}
.layout-4 .btn-secondary:hover {
    background-color: var(--secondary-light);
    border-color: var(--secondary-light);
}
.layout-4 .container-xxl {
    padding-right: 0;
    padding-left: 0;
}
@media screen and (min-width: 1200px) {
    .layout-4 .container-xxl {
        padding-right: calc(var(--spacer) * .5);
        padding-left: calc(var(--spacer) * .5);
    }
}
.layout-4 .grid {}
@media screen and (min-width: 1600px) {
    .layout-4 .grid {
        grid-template-rows: minmax(120px, 1fr);
    }
}
.layout-4 .grid .content {
    padding-right: .75rem;
    padding-left: .75rem;
}
.layout-4 .grid .content.upper-content {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-4 .grid .content.upper-content {
        grid-column: 6 /span 7;
        grid-row: 2 / span 2;
        background-color: var(--secondary-hover);
        padding: var(--spacer-xl) var(--spacer);
        display: grid;
        align-content: center;
    }
}
@media screen and (min-width: 1200px) {
    .layout-4 .grid .content.upper-content {
        padding: var(--spacer-xxl) calc(var(--spacer-xxl) * 2.5) var(--spacer-xxl) calc(var(--spacer-xxl) * 1.75);
        margin-right: calc(var(--spacer) * -.5);
    }
}
@media screen and (min-width: 1600px) {
    .layout-4 .grid .content.upper-content {
        padding: calc(var(--spacer-xxl) * 2) calc(var(--spacer-xxl) * 4) calc(var(--spacer-xxl) * 2) calc(var(--spacer-xxl) * 2);
    }
}
@media screen and (min-width: 1800px) {
    .layout-4 .grid .content.upper-content {
       position: relative;
    }
    .layout-4 .grid .content.upper-content::after {
       content: '';
       position: absolute;
       top: 0;
       left: 100%;
       height: 100%;
       width: 382px;
       background-color: var(--secondary-hover);
    }
}
.layout-4 .grid .content.upper-content .title {
    font-size: clamp(2.88rem, calc(2.33rem + 2.33vw), 4.25rem);
    color: var(--white);
    margin-bottom: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .layout-4 .grid .content.upper-content .title {
        font-size: var(--font-size-xxxl);
    }
}
@media screen and (min-width: 1200px) {
    .layout-4 .grid .content.upper-content .title {
        font-size: clamp(2.88rem, calc(2.33rem + 2.33vw), 4.25rem);
    }
}
.layout-4 .grid .content.upper-content .title span {
    text-transform: lowercase;
}
.layout-4 .grid .content.upper-content .action {
    margin-top: var(--spacer-xl);
}
.layout-4 .editor ul li::marker,
.layout-4 .editor ol li::marker {
    color: var(--white);
}
.layout-4 .grid .content.lower-content {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-4 .grid .content.lower-content {
        grid-row: 3 /span 1;
        grid-column: 1 / span 5;
        margin-top: calc(var(--spacer-xxl) * -1);
        margin-right: calc(var(--spacer) * -1);
        padding: calc(var(--spacer-xl) * 2) var(--spacer) calc(var(--spacer-xl) * 4);
        background-color: var(--secondary);
    }
}
@media screen and (min-width: 1200px) {
    .layout-4 .grid .content.lower-content {
        grid-row: 3 /span 1;
        padding: calc(var(--spacer-xxl) * 2) calc(var(--spacer-xxl) * 2) calc(var(--spacer-xxl) * 4);
        margin-left: calc(var(--spacer) * -.5);
        position: relative;
    }
}
@media screen and (min-width: 1800px) {
    .layout-4 .grid .content.lower-content::before {
        content: '';
        position: absolute;
        top: 0;
        right: 100%;
        height: 100%;
        width: 382px;
        background-color: var(--secondary);
    }
}
.layout-4 .grid .img-container {}
.layout-4 .grid .img-container.large {
    grid-row: 1 / span 1;

}
@media screen and (min-width: 768px) {
    .layout-4 .grid .img-container.large {
        grid-column: 1 / span 11;
        grid-row: 1 / span 2;
    }
}
@media screen and (min-width: 1200px) {
    .layout-4 .grid .img-container.large {
        aspect-ratio: 16/9;
        margin-left: calc(var(--spacer) * -.5);
    }
}
@media screen and (min-width: 1800px) {
    .layout-4 .grid .img-container.large {
        position: relative;
        z-index: -1;
    }
    .layout-4 .grid .img-container.large img {
        position: absolute;
        top: 0;
        right: 0;
        width: 2020px;
    }
}
@media screen and (min-width: 1200px) {}
.layout-4 .grid .img-container.inner-lower-content {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-4 .grid .img-container.inner-lower-content {
        grid-column: 1 / span 5;
        grid-row: 4 / span 1;
        margin-top: calc(calc(var(--spacer-xxl) * -1) + calc(var(--spacer-xl) * -2));
        margin-right: calc(var(--spacer) * -1);
    }
}
@media screen and (min-width: 1200px) {
    .layout-4 .grid .img-container.inner-lower-content {
        grid-column: 1 / span 5;
        grid-row: 4 / span 2;
        background-color: var(--secondary);
        position: relative;
        margin-top: calc(var(--spacer-xxl) * -3);
        margin-bottom: calc(var(--spacer-xxl) * 3);
        margin-left: calc(var(--spacer) * -.5);
    }
}
@media screen and (min-width: 1800px) {
    .layout-4 .grid .img-container.inner-lower-content {
        position: relative;
    }
    .layout-4 .grid .img-container.inner-lower-content::before {
        content: '';
        position: absolute;
        top: 0;
        right: 100%;
        height: 100%;
        width: 382px;
        background-color: var(--secondary);
    }
}
@media screen and (min-width: 768px) {
    .layout-4 .grid .img-container.inner-lower-content img {}
}
@media screen and (min-width: 1200px) {
    .layout-4 .grid .img-container.inner-lower-content img {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
    }
}
.layout-4 .grid .img-container.square {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-4 .grid .img-container.square {
        grid-row: 4 / span 2;
        grid-column: 6 / span 6;
        margin-top: calc(var(--spacer-xxl) * -1);
    }
}

.layout-4.no-text-2 {}
.layout-4.no-text-2 .lower-content {
    grid-row: 4 / span 1;
    grid-column: 1 / span 1;
}
.layout-4.no-text-2 .img-container.inner-lower-content {
    grid-row: 4 / span 1;
    grid-column: 1 / span 1;
    margin-top: calc(var(--spacer-xl) * -1);
}
@media screen and (min-width: 768px) {
    .layout-4.no-text-2 .img-container.inner-lower-content {
        grid-column: 1 / span 5;
        margin-top: calc(calc(var(--spacer-xxl) * -1) + calc(var(--spacer-xl) * -2));
    }
}
@media screen and (min-width: 1200px) {
    .layout-4.no-text-2 .img-container.inner-lower-content {
        grid-row: 4 / span 2;
    }
}
.layout-4.no-text-2 .grid .img-container.square {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .layout-4.no-text-2 .grid .img-container.square {
        grid-row: 4 / span 2;
    }
}



/* === LAYOUT-5 === */
.layout-5 {}
.layout-5 .title {}
@media screen and (min-width: 768px) {
    .layout-5 .title {
        grid-column: 1 / span 8;
    }
}
@media screen and (min-width: 1200px) {
    .layout-5 .title {
        grid-column: 2 / span 4;
    }
    .layout-5.img-left .title {
        grid-column: 7 / span 5;
    }
}
.layout-5 .subtitle {
    font-weight: bold;
    text-transform: uppercase;
    font-size: .875rem;
    line-height: 1.36;
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .layout-5.no-title .subtitle {
        grid-column: 1 / span 8;
    }
}
@media screen and (min-width: 1200px) {
    .layout-5.no-title .subtitle {
        grid-column: 2 / span 4;
    }
}
.layout-5 .content {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 768px) {
    .layout-5 .content {
        grid-column: 1 / span 6;
    }
    .layout-5.img-left .content {
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .layout-5 .content.left {
        grid-column: 2 / span 5;
    }
    .layout-5 .content.right {
        grid-column: 2 / span 5;
    }
    .layout-5.img-left .content.left {
        grid-column: 7 / span 5;
    }
    .layout-5.img-left .content.right {
        grid-column: 7 / span 5;
    }
}
@media screen and (min-width: 1400px) {
    .layout-5 .content.left {
        grid-column: 2 / span 2;
    }
    .layout-5 .content.right {
        grid-column: 5 / span 2;
    }
    .layout-5.img-left .content.left {
        grid-column: 7 / span 2;
        /* padding-right: var(--spacer); */
    }
    .layout-5.img-left .content.right {
        grid-column: 10 / span 2;
    }
}
@media screen and (min-width: 1600px) {
    .layout-5.img-left .content.left {
        /* padding-right: var(--spacer-xl); */
    }
    .layout-5 .content.left {
        /* padding-right: var(--spacer-xl); */
    }
}
.layout-5 .content .subtitle {
    margin-bottom: 1.875rem;
}
.layout-5 .content .action {
    margin-top: auto;
}
.layout-5 .content .action .btn {
    margin-top: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .layout-5 .content .action .btn {
        margin-top: var(--spacer-xxl);
    }
}
.layout-5 .deco {}
@media screen and (min-width: 768px) {
    .layout-5 .deco {
        grid-column: 8 / span 5;
    }
    .layout-5.img-left .deco {
        grid-row: 2 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .layout-5 .deco {
        grid-column: 8 / span 4;
        grid-row: 1 / span 3;
    }
    .layout-5.img-left .deco {
        grid-row: 1 / span 3;
        grid-column: 2 / span 4;
    }
}
@media screen and (min-width: 1400px) {
    .layout-5 .deco {
        /* grid-column: 9 / span 3; */
    }
}



/* === RESTAURANT-1 === */
.restaurant-1 {}
.restaurant-1 .grid {}
.restaurant-1 .grid .title {
    margin-bottom: 0;
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .title {
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .title {
        grid-column: 2 / span 4;
        grid-row: 2 / span 1;
    }
}
.restaurant-1 .grid .content {}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .content {
        padding-right: var(--spacer);
    }
}
@media screen and (min-width: 1400px) {
    .restaurant-1 .grid .content {
        padding-right: var(--spacer-xl);
    }
}
.restaurant-1 .grid .content.left {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .content.left {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .content.left {
        grid-column: 2 / span 3;
        grid-row: 3 / span 1;
    }
}
.restaurant-1 .grid .content.right {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .content.right {
        grid-row: 4 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .content.right {
        grid-row: 3 / span 1;
        grid-column: 5 / span 3;
    }
}
.restaurant-1 .grid .action {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .action {
        grid-column: 1 / span 5;
        grid-row: 3 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .action {
        grid-row: 4 / span 1;
        grid-column: 5 / span 3;
        align-items: start;
    }
}
.restaurant-1 .grid .img-container {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .img-container {
        grid-row: 2 / span 3;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .img-container {
        grid-row: 1 / span 5;
        grid-column: 8 / span 4;
    }
}
.restaurant-1 .grid .infos {
    text-align: center;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .infos {
        grid-row: 5 / span 1;
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .infos {
        grid-row: 4 / span 1;
        grid-column: 2 / span 3;
        text-align: start;
        padding-right: var(--spacer-xl);
    }
}
.restaurant-1 .grid .infos .subtitle {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: var(--spacer-xl);
}
.restaurant-1 .grid .resa-infos {
    text-align: center;
}
@media screen and (min-width: 768px) {
    .restaurant-1 .grid .resa-infos {
        grid-row: 5 / span 1;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1 .grid .resa-infos {
        grid-row: 5 / span 1;
        grid-column: 2 / span 3;
        text-align: start;
        padding-right: var(--spacer-xl);
    }
}
.restaurant-1 .grid .resa-infos .subtitle {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: var(--spacer-xl);
}


.restaurant-1.img-left {}
.restaurant-1.img-left .title {}
@media screen and (min-width: 768px) {
    .restaurant-1.img-left .title {
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1.img-left .title {
        grid-column: 7 / span 3;
    }
}
.restaurant-1.img-left .content {}
@media screen and (min-width: 768px) {
    .restaurant-1.img-left .content {
        padding-right: 0;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1.img-left .content {
        padding-right: 0;
        margin-right: calc(var(--spacer) * -1.5);
    }
}
.restaurant-1.img-left .content.left {}
@media screen and (min-width: 768px) {
    .restaurant-1.img-left .content.left {
        grid-column: 8 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1.img-left .content.left {
        grid-column: 7 / span 2;
    }
}
.restaurant-1.img-left .content.right {}
@media screen and (min-width: 768px) {
    .restaurant-1.img-left .content.right {
        grid-column: 8 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1.img-left .content.right {
        grid-column: 10 / span 2;
    }
}
.restaurant-1.img-left .action {}
@media screen and (min-width: 768px) {
    .restaurant-1.img-left .action {
        grid-column: 8 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1.img-left .action {
        grid-column: 7 / span 3;
    }
}
.restaurant-1.img-left .img-container {}
@media screen and (min-width: 768px) {
    .restaurant-1.img-left .img-container {
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-1.img-left .img-container {
        grid-column: 2 / span 4;
    }
}


/* === RESTAURANT-2 === */
.restaurant-2 .grid {}
.restaurant-2 .grid .title {
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px){
    .restaurant-2 .grid .title {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px){
    .restaurant-2 .grid .title {
        grid-column: 2 / span 3;
    }
}
.restaurant-2 .grid .content {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-2 .grid .content {
        grid-column: 1 / span 5;
        grid-row: 2 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .grid .content {
        grid-column: 2 / span 3;
        grid-row: 2 / span 1;
    }
}
.restaurant-2 .grid .content-secondary {
    grid-row: 6 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-2 .grid .content-secondary {
        grid-column: 1 / span 6;
        grid-row: 4 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .grid .content-secondary {
        grid-column: 6 / span 3;
        grid-row: 5 / span 1;
    }
}
.restaurant-2 .grid .img-container.vertical-1 {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-2 .grid .img-container.vertical-1 {
        grid-row: 2 / span 3;
        grid-column: 7 / span 3;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .grid .img-container.vertical-1 {
        grid-row: 1 / span 4;
        grid-column: 6 / span 3;
    }
}
.restaurant-2 .grid .img-container.vertical-2 {
    grid-row: 5 / span 1;
    margin-top: calc(var(--spacer) * -1.5);
}
@media screen and (min-width: 768px) {
    .restaurant-2 .grid .img-container.vertical-2 {
        grid-row: 2 / span 3;
        grid-column: 10 / span 3;
        margin-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .grid .img-container.vertical-2 {
        grid-row: 1 / span 4;
        grid-column: 9 / span 3;
    }
}
.restaurant-2 .grid .action {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .restaurant-2 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 2 / span 4;
    }
}
.restaurant-2 .infos {}
@media screen and (min-width: 768px) {
    .restaurant-2 .infos {
        grid-row: 5 / span 1;
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .infos {
        grid-row: 4 / span 1;
        grid-column: 2 / span 3;
    }
}
.restaurant-2 .infos .subtitle {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: var(--spacer-xl);
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .infos .subtitle {
        text-align: start;
    }
}
.restaurant-2 .infos .infos-content {
    text-align: center;
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .infos .infos-content {
        text-align: start;
    }
}
.restaurant-2 .resa-infos {}
@media screen and (min-width: 768px) {
    .restaurant-2 .resa-infos {
        grid-row: 5 / span 1;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .resa-infos {
        grid-column: 2 / span 3;
    }
}
.restaurant-2 .resa-infos .subtitle {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: var(--spacer-xl);
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .resa-infos .subtitle {
        text-align: start;
    }
}
.restaurant-2 .resa-infos .resa-content {
    text-align: center;
}
@media screen and (min-width: 1200px) {
    .restaurant-2 .resa-infos .resa-content {
        text-align: start;
    }
}




/* === DOMAINE-1 === */
.domaine-1 {}
.domaine-1 .grid {}
.domaine-1 .grid .title {
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .domaine-1 .grid .title {
        grid-column: 1 / span 9;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-1 .grid .title {
        grid-column: 2 / span 4;
    }
}
.domaine-1 .grid .content.left {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .domaine-1 .grid .content.left {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-1 .grid .content.left {
        grid-column: 2 / span 3;
        grid-row: 2 / span 1;
        padding-right: var(--spacer-xl);
    }
}
@media screen and (min-width: 1400px) {
    .domaine-1 .grid .content.left {
        padding-right: var(--spacer-xl);
    }
}
.domaine-1 .grid .content.right {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .domaine-1 .grid .content.right {
        grid-row: 4 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-1 .grid .content.right {
        grid-row: 2 / span 1;
        grid-column: 5 / span 3;
        padding-right: var(--spacer);
    }
}
@media screen and (min-width: 1400px) {
    .domaine-1 .grid .content.right {
        padding-right: var(--spacer-xl);
    }
}
.domaine-1 .grid .action {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .domaine-1 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-1 .grid .action {
        grid-column: 5 / span 3;
        grid-row: 3 / span 1;
    }
}
.domaine-1 .grid .img-container.min {
    grid-row: 6 / span 1;
    aspect-ratio: 3/4;
    margin-top: calc(var(--spacer) * -1.5);
}
@media screen and (min-width: 768px) {
    .domaine-1 .grid .img-container.min {
        grid-row: 2 / span 1;
        grid-column: 7 / span 6;
        margin-top: 0;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-1 .grid .img-container.min {
        grid-column: 2 / span 2;
        grid-row: 3 / span 3;
    }
}
.domaine-1 .grid .img-container.large {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .domaine-1 .grid .img-container.large {
        grid-column: 7 / span 6;
        grid-row: 3 / span 3;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-1 .grid .img-container.large {
        grid-column: 8 / span 4;
        grid-row: 1 / span 4;
    }
}



/* === DOMAINE 2 === */
.domaine-2 {}
.domaine-2 .grid {}
.domaine-2 .grid .title {}
@media screen and (min-width: 768px) {
    .domaine-2 .grid .title {
        grid-column: 1 / span 8;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-2 .grid .title {
        grid-column: 8 / span 4;
    }
}
.domaine-2 .grid .content {}
@media screen and (min-width: 768px) {
    .domaine-2 .grid .content {
        grid-row: 2 / span 1;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-2 .grid .content {
        grid-row: 2 / span 1;
        grid-column: 8 / span 3;
    }
}
.domaine-2 .grid .action {}
@media screen and (min-width: 768px) {
    .domaine-2 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-2 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 8 / span 3;
    }
}

.domaine-2 .grid .img-container {}
@media screen and (min-width: 768px) {
    .domaine-2 .grid .img-container {
        grid-row: 2 / span 3;
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .domaine-2 .grid .img-container {
        grid-row: 1 / span 4;
        grid-column: 2 / span 4;
    }
}




/* === DECO-1 === */
.deco-1 {}
.deco-1 .img-container {
    aspect-ratio: 16/9;
}




/* === SLIDER-1 === */
.col-slider-1 {
    overflow: hidden;
}
.col-slider-1 .grid {}
.col-slider-1 .grid .title {
    font-size: clamp(2.19rem, calc(1.64rem + 2.32vw), 4.25rem);
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .title {
        grid-column: 1 / span 8;
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .title {
        grid-column: 2 / span 5;
    }
}
.col-slider-1 .grid .swiper-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer);
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .swiper-navigation {
        grid-column: 10 / span 2;
        grid-row: 1 / span 1;
        align-items: flex-end;
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .swiper-navigation {
        grid-column: 9 / span 2;
    }
}
.col-slider-1 .grid .swiper-navigation .swiper-prev,
.col-slider-1 .grid .swiper-navigation .swiper-next {
    width: var(--spacer-xl);
    height: var(--spacer-xl);
}
.col-slider-1 .grid .carousel-slider-1 {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
    padding-right: calc(var(--spacer) * .5);
    padding-left: calc(var(--spacer) * .5);
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .carousel-slider-1 {
        grid-row: 2 / span 1;
        grid-column: 1 / span 12;
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .carousel-slider-1 {
        grid-column: 2 / span 11;
        width: calc(50% + 50vw);
    }
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide {
    width: 80%;
    display: flex;
    flex-direction: column;
    height: auto;
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide {
        width: 40%;
    }
}
@media screen and (min-width: 2100px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide {
        width: 35%;
    }
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .img-container {
    aspect-ratio: 16/9;
    height: 160px;
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .img-container {
        height: 280px;
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .img-container {
        height: 380px;
    }
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content {
    padding: var(--spacer-xl) var(--spacer);
    text-align: center;
    height: calc(100% - 160px);
    width: 100%;
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content {
        padding: var(--spacer-xxl);
        height: calc(100% - 280px);
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content {
        padding: var(--spacer-xxl);
        height: calc(100% - 380px);
    }
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content.white-bg {
    background-color: var(--white);
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content.light-bg {
    background-color: var(--light-hover);
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .slide-title {
    font-family: var(--font-family-serif);
    font-size: clamp(0.88rem, calc(0.53rem + 1.47vw), 2.19rem);
    text-transform: uppercase;
    margin-bottom: var(--spacer);
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .slide-title {
        margin-bottom: var(--spacer-xl);
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .slide-title {
        margin-bottom: var(--spacer-xxl);
    }
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .text {
    font-size: var(--font-size-sm);
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .action {
    margin-top: var(--spacer);
    display: flex;
    justify-content: center;
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .action {
        margin-top: var(--spacer-xl);
    }
}
@media screen and (min-width: 1200px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .action {
        margin-top: var(--spacer-xxl);
    }
}
.col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .action .btn {
    width: max-content;
    min-width: 100%;
}
@media screen and (min-width: 768px) {
    .col-slider-1 .grid .carousel-slider-1 .swiper-slide .content .action .btn {
        min-width: 310px
    }
}


/* === GROUP-1 === */
.group-1 {}
.group-1 .grid {}
.group-1 .grid .title {
    margin-bottom: 0;
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .group-1 .grid .title {
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .group-1 .grid .title {
        grid-column: 2 / span 4;
    }
}
.group-1 .grid .content {}
@media screen and (min-width: 1200px) {
    .group-1 .grid .content {
        padding-right: var(--spacer);
    }
}
@media screen and (min-width: 1400px) {
    .group-1 .grid .content {
        padding-right: var(--spacer-xl);
    }
}
.group-1 .grid .content.left {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .group-1 .grid .content.left {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .group-1 .grid .content.left {
        grid-column: 2 / span 3;
        grid-row: 2 / span 1;
    }
}
.group-1 .grid .content.right {
    grid-row: 5 / span 1;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .group-1 .grid .content.right {
        grid-row: 4 / span 1;
        grid-column: 1 / span 5;
        text-align: start;
    }
}
@media screen and (min-width: 1200px) {
    .group-1 .grid .content.right {
        grid-row: 2 / span 1;
        grid-column: 5 / span 3;
    }
}
.group-1 .grid .action {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .group-1 .grid .action {
        grid-column: 1 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .group-1 .grid .action {
        grid-row: 3 / span 1;
        grid-column: 5 / span 3;
    }
}
.group-1 .grid .img-container {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .group-1 .grid .img-container {
        grid-row: 2 / span 3;
        grid-column: 7 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .group-1 .grid .img-container {
        grid-row: 1 / span 4;
        grid-column: 8 / span 4;
    }
}


/* === GROUP-2 === */
.group-2 {}
.group-2 .title {
    grid-row: 1 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.img-left .title {
        grid-column: 7 / span 6;
    }
    .group-2.img-right .title {
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.img-left .title {
        grid-column: 6 / span 3;
    }
    .group-2.img-right .title {
        grid-column: 5 / span 3;
    }
}
.group-2 .content {
    grid-row: 2 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.img-left .content {
        grid-column: 7 / span 6;
    }
    .group-2.img-right .content {
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.img-left .content {
        grid-column: 6 / span 3;
    }
    .group-2.img-right .content {
        grid-column: 5 / span 3;
    }
}
.group-2 .img-container {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2 .img-container{
        grid-row: 1 / span 3;
    }
    .group-2.img-left .img-container {
        grid-column: 1 / span 5;
    }
    .group-2.img-right .img-container {
        grid-column: 8 / span 5;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.img-left .img-container {
        grid-column: 2 / span 3;
    }
    .group-2.img-right .img-container {
        grid-column: 9 / span 3;
    }
}


.group-2.has-content-secondary .content-secondary {
    grid-row: 3 / span 1;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .group-2.has-content-secondary .content-secondary {
        text-align: start;
        grid-row: 3 / span 1;
        grid-column: 7 / span 6;
    }
    .group-2.has-content-secondary.img-right .content-secondary {
        grid-column: 1 / span 6;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.has-content-secondary .content-secondary {
        grid-column: 6 / span 3;
    }
    .group-2.has-content-secondary.img-right .content-secondary {
        grid-column: 5 / span 3;
    }
}
.group-2.has-content-secondary .content-secondary .subtitle {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: var(--spacer);
}
@media screen and (min-width: 768px) {
    .group-2.has-content-secondary .content-secondary .subtitle {
        margin-bottom: var(--spacer-xl);
    }
}
.group-2.has-content-secondary .img-container {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.has-content-secondary .img-container {
        grid-row: 1 / span 4;
    }
}

.group-2.has-link .action {
    grid-row: 3 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.has-link .action {
        grid-column: 7 / span 6;
    }
    .group-2.has-link.img-right .action {
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.has-link .action {
        grid-column: 6 / span 3;
    }
    .group-2.has-link.img-right .action {
        grid-column: 5 / span 3;
    }
}
.group-2.has-link .img-container {
    grid-row: 4 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.has-link .img-container {
        grid-row: 1 / span 4;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.has-link .img-container {}
}

.group-2.has-link.has-content-secondary .content-secondary {
    grid-row: 5 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.has-link.has-content-secondary .content-secondary {
        grid-row: 3 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.has-link.has-content-secondary .content-secondary {}
}
.group-2.has-link.has-content-secondary .action {
    grid-row: 6 / span 1;
}
@media screen and (min-width: 768px) {
    .group-2.has-link.has-content-secondary .action {
        grid-row: 4 / span 1;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.has-link.has-content-secondary .action {}
}
.group-2.has-link.has-content-secondary .img-container {}
@media screen and (min-width: 768px) {
    .group-2.has-link.has-content-secondary .img-container {
        grid-row: 2 / span 4;
    }
}
@media screen and (min-width: 1200px) {
    .group-2.has-link.has-content-secondary .img-container {}
}

.group-2.no-title {
    margin-top: calc(var(--spacer-xl) * -1);
}
@media screen and (min-width: 768px) {
    .group-2.no-title {
        margin-top: calc(var(--spacer-xxl) * -1);
    }
}


/* === CONTACT-1 === */
.contact-1 {
    margin: 0;
    background-color: var(--secondary-hover);
    color: var(--white);
    overflow: hidden;
}
.contact-1 .title {
    font-size: clamp(3.00rem, calc(2.01rem + 4.21vw), 6.75rem);
    color: var(--white);
    margin-top: var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .contact-1 .title {
        grid-row: 1 / span 1;
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .contact-1 .title {
        grid-column: 2 / span 6;
        margin-top: calc(var(--spacer-xxl) * 2);
    }
}
.contact-1 .editor {}
@media screen and (min-width: 768px) {
    .contact-1 .editor {
        grid-row: 2 / span 1;
        grid-column: 1 / span 7;
    }
}
@media screen and (min-width: 1200px) {
    .contact-1 .editor {
        grid-column: 2 / span 4;
    }
}
@media screen and (min-width: 1600px) {
    .contact-1 .editor {
        grid-column: 2 / span 3;
    }
}
.contact-1 .form {
    position: relative;
}
@media screen and (min-width: 768px) {
    .contact-1 .form {
        grid-row: 3 / span 1;
        grid-column: 1 / span 7;
        margin-bottom: var(--spacer-xxl);
    }
}
@media screen and (min-width: 1200px) {
    .contact-1 .form {
        grid-column: 2 / span 5;
        margin-bottom: calc(var(--spacer-xxl) * 2);
    }
}
.contact-1 .socials-list {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: var(--spacer);
}
.contact-1 .socials-list a {
    color: var(--white);
    font-size: .875rem;
    line-height: 1.36;
}
.contact-1 .deco {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
}
@media screen and (min-width: 768px) {
    .contact-1 .deco {
        grid-row: 1 / span 3;
        grid-column: 9 / span 4;
        margin-left: 0;
    }
}
@media screen and (min-width: 1200px) {
    .contact-1 .deco {
        aspect-ratio: 9/16;
        height: 100%;
        max-width: calc(100% + calc(var(--spacer) * .5));
    }
}
@media screen and (min-width: 1800px) {
    .contact-1 .deco {
        margin-right: -392px;
        aspect-ratio: 9/16;
        height: 100%;
        max-width: calc(100% + 392px);
    }
}

.form-group {
    margin-bottom: 4.125rem;
}
.form-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--white);
    border-radius: 0;
    padding: calc(var(--spacer) * .25) calc(var(--spacer) * .5) 1.25rem 0;
    font-size: .875rem;
    line-height: 1.36;
    font-weight: 500;
    color: var(--white);
}
.form-control::placeholder {
    font-size: .875rem;
    line-height: 1.36;
    font-weight: 500;
    color: var(--white);
    text-transform: uppercase;
}
.form-control:focus {
    background-color: transparent;
    border-color: var(--secondary-light);
}
.custom-select {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--white);
    border-radius: 0;
    text-transform: uppercase;
    padding: calc(var(--spacer) * .25) calc(var(--spacer) * .5) calc(var(--spacer) * 1.2) 0;
    font-size: .875rem;
    line-height: 1.36;
    font-weight: 500;
    height: auto;
    line-height: inherit;
}
.custom-select.open {
    border-color: var(--secondary-light);
}
.nice-select::after {
    border-color: var(--white);
    height: 10px;
    width: 10px;
    top: calc(var(--spacer) * .65);
}
.custom-select .list {
    background-color: var(--secondary);
    border-radius: 0;
}
.nice-select .option {
    font-size: .875rem;
    font-weight: 500;
}
.custom-select .option:hover,
.custom-select .option.focus,
.custom-select .option.selected.focus {
    background-color: var(--secondary-light);
}
.form form .action {
    display: flex;
    justify-content: flex-end;
}
.form form .action .btn-form {
    width: var(--spacer-xxl);
    height: var(--spacer-xxl);
    border-radius: 50%;
    border: none;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition);
}
.form form .action .btn-form:hover {
    background-color: var(--secondary);
}
.form form .action .btn-form .arrow {
    width: 55%;
}
.form form .action .btn-form .arrow svg {
    fill: var(--secondary);
    transition: var(--transition);
}
.form form .action .btn-form:hover .arrow svg {
    fill: var(--white);
}
.wpcf7-spinner {
    display: none!important;
}

.wpcf7-form-control-wrap {
    display: inline-block;
    width: 100%;
}
.form-control.wpcf7-not-valid,
.nice-select.wpcf7-not-valid {
    border-color: var(--danger);
}
.wpcf7 .form-check-inline .wpcf7-list-item-label {
    width: calc(100% - calc(var(--spacer) * .5) - .875rem);
}
.wpcf7-not-valid-tip {
    position: absolute;
    top: .125rem;
    right: 1.75rem;
    font-size: .875rem!important;
    color: var(--white)!important;
    font-weight: bold!important;
}
span.wpcf7-form-control-wrap {
    display: inline-block;
    width: 100%;
}
.wpcf7 form .wpcf7-response-output {
    margin: var(--spacer-xl) 0!important;
    padding: var(--spacer-xl)!important;
    border: 2px solid #00a0d2;
    background-color: var(--white);
}
@media screen and (min-width: 768px) {
    .wpcf7 form .wpcf7-response-output {
        margin: var(--spacer-xxl) 0!important;
    }
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--danger)!important;
    color: var(--danger);
    font-weight: bold;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--link)!important;
    color: var(--link);
    font-weight: bold;
    text-align: center;
}


.col-footer-infos {
    margin: 0;
    padding: calc(var(--spacer) * 2.5) 0;
    background-color: var(--white);
}
.col-footer-infos .container-xxl > .row {
    margin-top: calc(var(--spacer-xxl) * -1);
}
.col-footer-infos .item-infos {
    margin-top: var(--spacer-xxl);
}
@media screen and (min-width: 768px) {
    .col-footer-infos .item-infos {}
}
@media screen and (min-width: 1400px) {
    .col-footer-infos .item-infos {
        padding-right: 0;
    }
}
.col-footer-infos .item-infos .content {
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 0 var(--spacer-xl);
}
@media screen and (min-width: 768px) {
    .col-footer-infos .item-infos .content {
        text-align: start;
        padding: 0;
    }
}
@media screen and (min-width: 1400px) {
    .col-footer-infos .item-infos .content {
        margin-right: calc(var(--spacer) * -1);
    }
}
@media screen and (min-width: 1600px) {
    .col-footer-infos .item-infos .content {
        margin-right: calc(var(--spacer-xl) * -1.5);
    }
    .col-footer-infos .item-infos:last-child .content {
        margin-right: calc(var(--spacer) * -1);
    }
}
.col-footer-infos .item-infos .content .item-title {
    margin-bottom: calc(var(--spacer) * 1.25);
    font-size: .875rem;
    font-weight: bold;
    text-transform: uppercase;
}
@media screen and (min-width: 1200px) {
    .col-footer-infos .item-infos .content .item-title {
        margin-bottom: var(--spacer-xl);
    }
}
.col-footer-infos .item-infos .content .editor a {
    border-bottom: none;
}



footer {
    margin-top: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}
footer .grid {
    margin-right: calc(var(--spacer) * -.5);
    margin-left: calc(var(--spacer) * -.5);
    row-gap: 0;
}
footer .grid-item {
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * .5);
}
@media screen and (min-width: 768px) {
    footer .grid-item {
        grid-column: span 6;
    }
}
@media screen and (min-width: 1200px) {
    footer .grid-item {
        grid-column: 2 / span 10;
        padding: var(--spacer-xl) calc(var(--spacer) * .5);
    }
}
footer .grid-item.up {
    background-color: var(--light-hover);
    position: relative;
}
@media screen and (min-width: 1200px) {
    footer .grid-item.up {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    footer .grid-item.up::before,
    footer .grid-item.up::after {
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        width: 35vw;
        background-color: var(--light-hover);
    }
    footer .grid-item.up::before {
        right: 100%;
    }
    footer .grid-item.up::after {
        left: 100%;
    }

}
@media screen and (min-width: 1200px) {
    footer .grid-item.down {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
footer .grid-item.down .inner-item {}
@media screen and (min-width: 1200px) {
    footer .grid-item.down .inner-item {
        display: flex;
        align-items: center;
        gap: var(--spacer);
    }
}
footer .grid-item .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer);
}
@media screen and (min-width: 1200px) {
    footer .grid-item .menu {
        flex-direction: row;
        gap: var(--spacer-xl);
    }
}
@media screen and (min-width: 1600px) {
    footer .grid-item .menu {
        gap: var(--spacer-xxl);
    }
    footer .grid-item.down > .menu {
        flex-direction: row-reverse;
    }
}
footer .grid-item .menu li a {
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    text-transform: uppercase;
}
footer .grid-item .socials-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer);
    margin: var(--spacer) 0;
}
@media screen and (min-width: 1200px) {
    footer .grid-item .socials-links {
        margin: 0 0 0 var(--spacer-xl);
        justify-content: flex-start;
    }
}
@media screen and (min-width: 1600px) {
    footer .grid-item .socials-links {
        margin: 0 0 0 var(--spacer-xxl);
    }
}
footer .grid-item .socials-links .social-link {
    color: var(--text);
    transition: var(--transition);
}
footer .grid-item .socials-links .social-link:hover {
    opacity: .6;
}

footer .lang-selector ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer);
    margin: var(--spacer) 0 0;
    padding: 0px;
    position: relative;
}
@media screen and (min-width: 1200px) {
    footer .lang-selector ul {
        margin: 0;
    }
}
footer  .lang-selector ul li a {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    opacity: 0.65;
}
footer .lang-selector ul li.wpml-ls-current-language a {
    opacity: 1;
}
footer .lang-selector ul li:not(:last-child)::after {
    content: "|";
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text);
    position: relative;
    top: -2px;
    right: -.75rem;
}
footer .lang-selector ul li a img {
    width: 18px;
    height: 10px;
    margin: 0px 5px;
}
footer .content .legal-menu {
    margin-top: var(--spacer);
}
footer .content .legal-menu .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}