/* Import CSS files in order */
@import url("reset.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

/* Variables */
:root{
    --header-height: 9rem;
}

body > form {
    overflow: hidden !important;
    min-height: 100vh;
}

/* Header version 1
header{position: fixed; left: 0; top: 0; width: 100%; height: var(--header-height); z-index: 999; display: flex; align-items: center; transition: var(--transition);}
header.header-scrolled {background-color: var(--tertiary-color);}
.header-scrolled nav ul li a {color:var(--text-color);}
header.header-bg + *{padding-top: var(--header-height);}
nav ul li a{display: flex; align-items: center; justify-content: center; gap: 0 1rem; line-height: 1; white-space: nowrap; padding: 1rem 1.5rem; color: white; font-size: 1.9rem; text-transform: uppercase; font-family: var(--secondary-font); letter-spacing: .4rem; position: relative;}
.logo img, a.logo-mobile{width: 20rem;}

 /*--- STILI MASCHERA LOGO ---
.logo-mask {
    width: 18rem; 
    height: 7rem; 
    background-color: white; 
    transition: var(--transition);
    -webkit-mask-image: url('/img/logo/LOGO.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-image: url('/img/logo/LOGO.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: left center;
}

.header-scrolled .logo-mask {
    background-color: var(--text-color); 
}

@media(width > 991px) {
    .logo-mask {
        width: 24rem;
    }
}
@media(width < 1400px){
    nav ul{gap: 0 1rem;}
    nav ul li a.logo{ min-width: auto;} 
}
@media(width < 1200px){
    nav ul li a{letter-spacing: .2rem; padding: 1rem 1rem;} 
}
@media(width > 991px){
    nav ul{display: flex; align-items: center; justify-content:space-between; gap: 0 var(--gutter);}
    nav ul li a::after{content: ""; position: absolute; left: 0; top: 50%; height: .2rem; background-color: var(--primary-color); transition: background-color .4s ease,width .3s ease-in; width: 0; transform: translateY(-50%);}
    nav ul li a:not(.logo):hover::after, nav ul li a.active::after{width: 100%;}
    header .container a.logo-mobile{display: none !important;}
    header a.logo{min-width: 24rem;}  
}
@media(width < 992px){
    header{background-color: transparent;}
    header nav{position: fixed; left: 0; top: 0; width: 100%; background-color: transparent; padding-top: var(--header-height); transition: var(--transition);opacity: 0; visibility: hidden;}
    header nav.active{opacity: 1; visibility: visible; background-color:var(--tertiary-color); height:100vh; position:absolute; display:flex;flex-direction:column;justify-content:center;}
    nav ul li a{justify-content: center; padding: 1.5rem var(--gutter); transition: var(--transition); color:var(--text-color);}
    nav ul li a.active, nav ul li a:hover{background-color: rgba(0, 0, 0, 0.05); color: var(--primary-color);}
    header.header-scrolled {background-color:transparent !important;}
    header .container{display: flex; align-items: center; justify-content: center;}
    nav ul li a.logo{position: absolute; top: calc(var(--header-height) * 2); left: 50%; transform: translateX(-50%); padding: 0;}
    a.logo-mobile{position: relative; z-index: 9999;}
    .logo-mask {background-color: var(--text-color);}
}
@media(width < 480px) {
    :root {--header-height: 7rem;}
    .logo-mask { width: 14rem;height: 5rem;}
}*/

/* Header - ALWAYS MOBILE STYLE */
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 999;
    display: flex;
    align-items: center;
    transition: var(--transition);
    background-color: transparent;
}

    header.header-scrolled {
        background-color: var(--tertiary-color);
    }

    header.header-bg + * {
        padding-top: var(--header-height);
    }

    /* --- Container --- */
    header .container {
        display: flex;
        justify-content: space-between; 
        align-items: center;
    }

    /* --- Logo (fuori dal nav, sempre visibile) --- */
    header > .container > a.logo {
        display: flex;
        align-items: center;
        justify-content:flex-start;
        height: var(--header-height);
        padding: 0;
        transition: none;
        position: relative;
    }

.header-right-group {
    display: flex;
    align-items: center;
    justify-content:flex-end;
    gap: 6rem; 
    background-color:var(--body-color);
    padding:var(--gutter-half);
    z-index:99999;
}

/* --- Logo Mask --- */
.logo-mask {
    width: 12rem;
    height: 7rem;
    background-color: var(--body-color);
    transition: background-color var(--transition);
    -webkit-mask-image: url('/img/logo/LOGO.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('/img/logo/LOGO.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Logo scuro quando scrollato */
header.header-scrolled .logo-mask {
    background-color: var(--text-color);
}

/* Logo scuro quando menu aperto */
header:has(nav.active) > .container > a.logo .logo-mask {
    background-color: var(--text-color);
    transition: none;
}

header:has(nav.active) > .container > a.not-nav { 
    display:none;
}

/* --- Language switcher (dentro .nav-icon-wrapper) --- */

.lang-selector a {
    font-family: var(--secondary-font);
    text-transform: uppercase;
    color: var(--text-color);
    transition: none;
    font-size: var(--h3);
}

    .lang-selector a:hover {
        color: var(--primary-color);
    }

/* Language scuro quando menu aperto o scrollato */
header.header-scrolled .header-lang a,
header:has(nav.active) .header-lang a {
    color: var(--text-color);
}

/* --- Nav (overlay menu) --- */
header nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    padding-top: var(--header-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 998;
}

    header nav.active {
        opacity: 1;
        visibility: visible;
        background-color: var(--tertiary-color);
    }

/* --- Nav links --- */
nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 1rem;
    line-height: 1;
    white-space: nowrap;
    padding: 1.5rem var(--gutter);
    font-size: 1.9rem;
    text-transform: uppercase;
    font-family: var(--secondary-font);
    letter-spacing: .4rem;
    color: var(--text-color);
    transition: var(--transition);
    position: relative;
}

    nav ul li a:hover,
    nav ul li a.active {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--primary-color);
    }


.nav-logo {
    display: none;
}

header nav.active .nav-logo {
    display: flex;
    justify-content: center;
    padding: var(--gutter) 0;
}

    header nav.active .nav-logo a {
        padding: 0;
        background-color: transparent !important;
    }

        header nav.active .nav-logo a:hover {
            background-color: transparent !important;
        }

    header nav.active .nav-logo .logo-mask {
        background-color: var(--text-color);
        transition: none;
    }

/* --- Responsive --- */
@media (width > 991px) {
    .logo-mask {
        width: 12rem;
    }

    header .container {
        justify-content: space-between;
        width: 100%;
        /*max-width: var(--container-width);*/
    }
}

@media (width < 480px) {
    :root {
        --header-height: 7rem;
    }

    .logo-mask {
        width: 10rem;
        height: 5rem;
    }
}


/* Hero Section */
.hero-section{height: 100vh; background: url(/img/header-img/title-img-1.jpg) bottom center no-repeat; position: relative; isolation: isolate; display: flex; align-items: center; background-size:cover;}
.hero-section::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000061; content: ""; z-index: -1; }
.hero-section .container{max-width: 90rem;}
.hero-section h1{color: white; text-align: center; line-height: 1;}
@media(width < 1200px){
    .hero-section img{width:70%;}
}
@media(width < 992px){
    .hero-section img{width:60%;}
}
@media(width < 768px){
    .hero-section img{width:60%;}
}
@media(width < 480px) {
    .hero-section {
        background-position: center center;
    }
    .hero-section img{width:65%;}
    .hero-section .container {display:flex; justify-content: center !important;}
}

/* Main, Section, Section Header */
main{padding: var(--sm) 0;}
.section{padding: var(--sm) 0;}
.section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--lg);}
.section-block:not(:last-child){margin-bottom: var(--sm);}
@media(width < 992px){
    main{padding: var(--gutter) 0;}
    .section{padding: var(--gutter) 0;}
    .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--md);}
}
@media(width < 768px){
    .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--sm);}
    .section-header p {padding-top: var(--sm); padding-right:0 !important; padding-left:0 !important;}
    .section-header img {height:60%;}
}
@media(width < 480px) {
    main { padding: var(--gutter-half) 0;}
    .section { padding: var(--gutter-half) 0;}
}

/* Intro Section */
.intro-grid{display: grid; grid-template-columns: repeat(4,1fr); gap: var(--md);}
.intro-grid figure{max-width: 60rem;}
.intro-grid figure:not(:last-child){margin-bottom: var(--gutter);}
.intro-content{max-width: 75rem;}
@media(width < 1200px){
    .intro-grid figure{max-width: 50rem;}
    .intro-grid { gap: var(--sm);}
}
@media(width < 992px){
    .intro-grid figure{max-width: 100%;}
    .intro-content{max-width: 100%;}
}

/* Article */
article h2:not(:last-child), article h3:not(:last-child), article h6:not(:last-child), .article-headding:not(:last-child), article video:not(:last-child){margin-bottom: var(--gutter);}
article p:not(:last-child), article .article-block-content:not(:last-child){margin-bottom: 2rem;}
article .article-block-content p:not(:last-child){margin-bottom: .5rem;}
.article-block-content.bordered{padding: 1rem 0; border-top: .1rem solid rgba(var(--tertiary-color-rgb), 0.3); border-bottom: .1rem solid rgba(var(--tertiary-color-rgb), 0.3);}

.article-headding p{text-transform: uppercase; letter-spacing: .8rem; font-size: var(--fs-sm); font-family: var(--secondary-font); font-weight: 200; line-height: 1; color: var(--primary-color);}
.article-headding p:not(:last-child){margin-bottom: .5rem;}

.vector{position: absolute; top: 0; left: 0; max-width: 13.7rem; z-index: -1;}
.vector-content{padding-top: var(--lg);}

.grid-2{display: grid; grid-template-columns: 30% 60%; gap: var(--md); justify-content: space-between;}
.grid-2 figure:not(:last-child){margin-bottom: var(--gutter);}
.grid-2 article{max-width: 80%; margin: 0 auto;}
.grid-2 .vector-content .article-headding{position: relative; z-index: 99;}
.grid-2 .vector-content .vector{z-index: 99; left: -6rem;}
.grid-2 .banner-image{aspect-ratio: 1.9/1;}
.grid-2 .banner-image img{width: 100%; height: 100%; object-fit: cover;}
@media(width < 992px){
    .grid-2{grid-template-columns: 1fr;}
    .grid-2 .vector-content .vector{left: 0;}
    .grid-2 article{max-width: 100%;}
}
@media(width < 768px) {
    .vector-content {padding-top: var(--sm);}
    .vector {max-width: 8rem;}
}

/* Products */
.product{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-inline: auto;}
.product figure{width: 100%; max-width: 45rem;margin: 0 auto;height:55rem; border:1px solid var(--primary-color);overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:3rem;}
.product-name{display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--gutter-half) 0; color: var(--primary-color);}
.add-to-cart-link{display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--secondary-font); color: var(--primary-color); font-weight: 300; font-size: var(--fs-sm); padding: var(--gutter-half) 0;}
.product img, .product .product-content {display: block; width: 100%; height: 100%; object-fit: contain;}
.product figure img {height: 80%; margin-top: auto; margin-bottom: auto;}
.product figure img, .product-name {transition: transform 0.5s ease;}
.product figure a {display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-decoration: none;}
.product-content{background-color: var(--body-color);}
.product .add-to-cart-link{transition: var(--transition); opacity: 0;}
.product .add-to-cart-link:hover{color: var(--text-color);}
.product-name {font-size:2.5rem;}
@media (hover: hover) {
    .product figure:hover img,
    .product figure:hover .product-name {
        transform: scale(1.05);
        cursor: pointer;
    }
    .product:hover .product-content {
        transform: translateY(-54px);
    }
    .product:hover .add-to-cart-link {
        opacity: 1;
    }
}
/* Fallback for Touch Devices (Mobile/Tablet) */
@media (hover: none) {
    .product .add-to-cart-link {
        opacity: 1;
    }
    .product .product-content {
        transform: translateY(-20px);
    }
}
@media(width < 1200px) {
    .product {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media(width < 992px) {
    .product {
        grid-template-columns: repeat(2, 1fr);
    }
        .product figure {
            height: 45rem;
        }
}
@media(width < 600px) {
    .product {
        grid-template-columns: 1fr;
        gap: var(--gutter-half);
    }
        .product figure {
            height: 40rem;
            max-width: 90%;
        }
}
@media(width < 480px) {
    .product figure {
        height: 36rem;
    }
    .product-name {
        font-size: 2rem;
    }
}

/* Contact */
.contact-section .container{max-width: 1480px;}
.contact-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm);}
.contact-grid h4{line-height: 1;}
.contact-grid h4:not(:last-child){margin-bottom: 2rem;}
.contact-grid ul.contact-content-list li{display: grid; grid-template-columns: 13.5rem auto;}
.contact-grid ul.contact-content-list li h5{font-weight: 700;}
.contact-content-block:not(:last-child){margin-bottom: var(--sm);}
.contact-form li:not(:last-child){margin-bottom: var(--gutter);}
.contact-form .label:not(:last-child){margin-bottom: .5rem;}
.contact-form .required-label{color: red; font-weight: normal;}
.contact-form input, .contact-form textarea, select {border: .1rem solid white; width: 100%; background-color: white; height: 6.6rem; padding: 0 var(--gutter); transition: var(--transition);}
.contact-form input:hover, .contact-form textarea:hover, select:hover, .contact-form input:focus, .contact-form textarea:focus{border-color:var(--primary-color);}
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    padding: 0 5rem 0 var(--gutter);
}
.contact-form .grid-form{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);}
.contact-form textarea{resize: none; min-height: 12rem; padding: var(--gutter);}
.contact-form textarea:focus::placeholder{opacity: 0; visibility: hidden;}
.contact-form-button{font-family: var(--secondary-font); color: var(--secondary-color) !important; cursor: pointer; text-decoration:none!important;}
.contact-form .label{color:var(--primary-color);font-family:var(--secondary-font); padding-bottom:var(--gutter-half);}
.grid-form div{display:grid;gap:var(--gutter-half);}
.contact-form .contact-form-checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-height: auto;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: checkbox;
    -webkit-appearance: checkbox;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

    .checkbox-container label {
        margin-bottom: 0 !important;
        font-weight: normal;
        cursor: pointer;
    }

.contact-grid iframe {
    width: 100%;
    height: 100%;
}
@media(width < 1400px) {
    .contact-form .grid-form {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(width < 1200px) {
    .contact-form .grid {
        grid-template-columns: 1fr;
    }
    .contact-form .grid-form {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(width < 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
        .contact-grid iframe {
            aspect-ratio: 1;
        }
}
@media(width < 600px) {
    .contact-form .grid-form {
        grid-template-columns: 1fr;
    }
    .contact-grid ul.contact-content-list li {
        grid-template-columns: 1fr;
        gap: .3rem;
    }
    .contact-form input, .contact-form textarea, select {
        padding: 0 var(--gutter-half);
    }
    .contact-form-button {
        padding: 0 2.5rem !important;
        width:100%;
    }
}

/* Footer */
footer{background-color: var(--primary-color); --container-width: 124rem; font-family:var(--secondary-font)}
.footer-content{display: grid; grid-template-rows: 3fr 0.5fr 0.5fr ; height:80vh;}
.footer-logo {display: flex; margin: 0 auto; padding: var(--gutter) 0; align-items:center; justify-content:center;}
.footer-logo img{width:80%;}
.footer-content{text-align: center;}
.footer-content p{font-size: var(--fs-lg); color: white;}
.footer-content p a{color: white;}
.footer-headding {display: flex; flex-direction: row; justify-content: space-between; align-items:center;}
.footer-headding:last-child {border-top: .1rem solid white;}
@media(width < 768px) {
    .footer-content{grid-template-rows: 2fr 0.5fr 0.5fr; height:60vh;}
    .footer-logo{width:60%;}
}
@media(width < 481px){
    .footer-content {grid-template-rows: 1.5fr 0.8fr 0.8fr ; height:50vh; font-size:1.3rem;}
    .footer-logo {width: 80%;}
    .footer-headding {display:grid;justify-content:normal;padding:var(--gutter);}
    .footer-headding:last-child {padding-bottom:var(--lg);}
}

/* Page Hero */
.page-hero-section{height: 50dvh; background-size: cover; background-repeat: no-repeat; background-position: 0px 40%; position: relative; isolation: isolate; display: flex; align-items: center;}
.page-hero-section::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000061; content: ""; z-index: -1; }
.page-hero-1{background-image: url(/img/header-img/title-img-2.png);}
.page-hero-2 {background-image: url(/img/header-img/title-img-3.png);}
.page-hero-3 {background-image: url(/img/header-img/title-img-4.png);}
.page-hero-wine{height: 25rem; width:100%;}
.page-hero-empty{background-color:var(--body-color);}
.page-hero-section h1{text-align: center; color: white; line-height: 1;opacity:1}
.page-hero-section h1 .char{ display:inline-block}
@media(width < 992px) {
    .page-hero-section {
        height: 40dvh;
    }
}
@media(width < 600px) {
    .page-hero-section {
        height: 35dvh;
    }
    .page-hero-wine {
        height: 18rem;
    }
}


/* Intro Grid 2 */
.intro-grid-2{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm);}
.intro-grid-2 .intro-content{max-width: 100%;}
@media(width < 1200px){
    .intro-grid-2{grid-template-columns: 1fr;}
}

/* Content */
.content-grid{display: flex; gap: var(--sm);}
.content-grid:not(:last-child){margin-bottom: var(--gutter);}
.content-grid .figure-container,.content-grid .wine-description {height:100%;width:50%;}
.content-grid a{color:var(--primary-color);text-transform:uppercase;cursor:pointer;pointer-events:auto !important; z-index:2;}
.content-grid a:hover {text-decoration: underline;}
.content-grid figure { height: 90vh; width:80%;}
.content-grid img {height: 100%;object-fit:cover;object-position:center;}
.tech-list li { padding: 2.5rem 0;}
    .tech-list li:not(:last-child) {border-bottom: .1rem solid var(--primary-color);}
.tech-list span {font-size: var(--h3);}
@media(width < 1200px) {
    .content-grid{
        flex-direction:column;
    }
    .content-grid figure {
        width: 100%;
        height: auto;
    }
}
@media(width < 768px){
    .content-grid {
        justify-items:normal !important;
    }
    .content-grid a {
        padding:var(--sm) 0;
    }
}
@media(width < 600px) {
    .tech-list li {
        padding: 1.5rem 0;
        display:grid !important;
        grid-gap:var(--gutter);
    }
    .tech-list span {
        font-size: var(--h4);
    }
}

/* Gallery */
.gallery-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
.gallery-grid > *{aspect-ratio: 1; position: relative;}
.gallery-grid > ::after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(84, 93, 92, 0.56); z-index: 1; opacity: 0;  transition: var(--transition); visibility: hidden;}
.gallery-grid > :hover::after{opacity: 1; visibility: visible;}
.gallery-grid > * > img{object-fit: cover; width: 100%; height: 100%;}
.gallery-grid p{position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: var(--transition); visibility: hidden; z-index: 2; color: white;}
.gallery-grid :hover > p{opacity: 1; visibility: visible;}
.lightbox .lb-image{border:0;}
@media(width < 1200px) {
    .gallery-grid{grid-template-columns: repeat(3, 1fr);}
}
@media(width < 768px){
    .gallery-grid{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 481px){
    .gallery-grid{grid-template-columns:1fr;}
}

/* Contact Intro */
.contact-intro{padding: var(--xl) 0; background: url(../images/vector-1.png) center center no-repeat; background-size: auto 100%;}
.contact-intro h4{font-size: calc(var(--h4) - .8rem);}
@media(width < 992px) {
    .contact-intro {
        padding: var(--lg) 0;
    }
}
@media(width < 600px) {
    .contact-intro {
        padding: var(--sm) 0;
        background-size: auto 80%;
    }
}


/* Single Product */
.single-product{max-width: 120rem; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); align-items: center;}
.single-product-content > :not(:last-child){margin-bottom: var(--gutter);}
.breadcrumb{display: flex; align-items: center; margin: 0 calc(1rem * -1);}
.breadcrumb li, .breadcrumb li a{font-size: var(--fs-sm); color: var(--text-color); text-transform: uppercase; font-family: var(--secondary-font); font-size: 1rem; letter-spacing: .2rem; color: #767676; transition: var(--transition);}
.breadcrumb li a:hover{color: var(--primary-color);}
.breadcrumb li{padding: 0 1rem; position: relative;}
.breadcrumb li:not(:last-child)::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(15deg); width: .1rem; height: .8rem; background-color: #767676; content: "";}
@media(width < 992px){
    .single-product{grid-template-columns: 1fr;}
}

/* Reveal Animation */
.reveal-left, .reveal-right {
  visibility: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Pin Section */
.pin-section {
    min-height: 400vh;
    position: relative;
    background: var(--body-color);
    margin-bottom: var(--xl);
    overflow: hidden;
}

    .pin-section .section-header {
        position: relative;
        z-index: 10;
        padding: var(--gutter);
    }

    .pin-section .section-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1;
        pointer-events: none;
        padding: 0 var(--gutter);
    }

    .pin-section .intro-grid figure {
        position: relative;
        height: 100%;
        overflow: hidden;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
    }

        .pin-section .intro-grid figure img {
            width: 100%;
            height: 60%;
            max-height: none;
            object-fit: cover;
        }

@media(width < 992px) {
    .pin-section {
        min-height: 250vh;
    }
}
@media(width < 768px) {
    .pin-section {
        min-height: auto; 
        margin-bottom: var(--md); 
    }
}

/* Carousel */

.mwg_effect007 .pin-height {
    height: 300vh;
    padding: 0;
}

.mwg_effect007 .container {
    position: relative;
    height: 75vh;
    margin-top: var(--header-height);
}

.mwg_effect007 .circle {
    width: 300%;
    aspect-ratio: 1;
    position: absolute;
    top: 60%;
    left: -100%;
    pointer-events: none;
}

.circle a {
    pointer-events:auto;
}

.mwg_effect007 .media {
    height: 55vh !important;
    width: 20vw !important;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    /*border: .2rem solid var(--primary-color);*/
    background-color:var(--tertiary-color);
    padding:var(--md);
}
@media(width < 1200px) {
    .mwg_effect007 .media {
        width: 27vw !important;
    }
}
@media(width < 992px) {
    .mwg_effect007 .media {
        width: 50vw !important;
        height: 45vh !important;
        border: none;
    }
    .mwg_effect007 .pin-height {
        height: 200vh;
    }
    .mwg_effect007 .container {
        height: 60vh;
    }
}
@media(width < 600px) {
    .mwg_effect007 .media {
        width: 80vw !important;
        height: 40vh !important;
    }
    .mwg_effect007 .pin-height {
        height: 250vh;
    }
}

/* Swiper */

.mySwiper {
    padding-inline: var(--gutter);
    overflow: visible;
}

/*.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}*/

.swiper-slide figure {
    /* width: 25vw;*/
    height: 65vh;
    object-fit: cover;
}

    .swiper-slide img {
        width: 100%;
        height:100%;
        object-fit:cover;
        transition: transform 0.3s ease-in-out;
    }
@media(width < 992px) {
    .swiper-slide figure {
        height: 50vh;
    }
    .parallax-img, parallax-img-invert {
        width: 50%;
    }
}
@media(width < 600px) {
    .swiper-slide figure {
        height: 40vh;
    }
    .mySwiper {
        padding-inline: var(--gutter-half);
    }
    .parallax-img, parallax-img-invert {
        width: 40%;
    }
}
@media(width < 480px) {
    .swiper-slide figure {
        height: 32vh;
    }
}