/* ========================
   Base
======================== */
        
        body {
            font-family: 'Instrument Sans', sans-serif;
            background-color: #EBE7E1;
            color: #232120;
            line-height: 1.6;
            font-size: 16px;
            padding: 0 15px;
            max-width: 1280px;
            margin-top: 0px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }
        
        .sg_full_width_dark {
            width: 100vw;
            margin-left: calc(-1 * ((100vw - 100%) / 2));
            background-color: #232120;
            color: #EBE7E1;
        }
        
        .sg_width_dark {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            padding-left: 15px;
            padding-right: 15px;
        }
        
        a {
            font-family: 'Instrument Sans', sans-serif;
            color: #767676;
            text-decoration: inherit;
        }
        
        .spacing_bottom_20 {
            margin-bottom: 20px;
        }
        
        .spacing_top_20 {
            margin-top: 20px;
        }
        
        .spacing_top_30 {
            margin-top: 30px;
        }
        
        .spacing_top_40 {
            margin-top: 40px;
        }
        
        .spacing_top_100 {
            margin-top: 100px;
        }
        
        .spacing_bottom_40 {
            margin-bottom: 40px;
        }
        
        .spacing_bottom_80 {
            margin-bottom: 80px;
        }
        
        .mobile_spacing_bottom_40 {
            margin-bottom: 40px;
        }
        
        .mobile_spacing_bottom_60 {
            margin-bottom: 60px;
        }
        
        .section_divider {
            height: 1.6px;
            background-color: #ffffff;
            width: 100%;
            margin: 40px 0;
        }
        
        .section_divider_dark {
            height: 1.6px;
            background-color: #232120;
            width: 100%;
            margin: 40px 0;
        }
        
        .ratio_1_1 div {
            aspect-ratio: 1 / 1;
        }
        
        .ratio_2_1 div {
            aspect-ratio: 2 / 1;
        }
        
        .ratio_1_2 div {
            aspect-ratio: 1 / 2;
        }
        
        .ratio_4_5 div {
            aspect-ratio: 4 / 5;
        }
        
        .ratio_9_16 div {
            aspect-ratio: 9 / 16;
        }
        
        .ratio_16_6 div {
            aspect-ratio: 16 / 6;
        }
        
        .ratio_16_7 div {
            aspect-ratio: 16 / 7;
        }
        
        .ratio_16_9 div {
            aspect-ratio: 16 / 9;
        }
        
        .border_rounded div {
            border-radius: 16px;
        }
        /* ========================
     Footer
  ======================== */
        
        .pre_footer {
            padding: 10px 0;
            margin: 80px 0 20px 0;
            border-top: 1px #232120 solid;
            border-bottom: 1px #232120 solid;
        }
        
        footer img {
            width: 150px;
        }
        
        footer a,
        footer p {
            color: #232120;
            font-size: 18px;
            line-height: 16px;
        }
        
        footer {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column-reverse;
            padding-bottom: 20px;
        }
        
        footer>div {
            width: 100%;
        }
        
        footer>div:nth-of-type(2) {
            display: block;
        }
        
        footer>div:nth-of-type(3),
        footer>div:nth-of-type(4) {
            display: none;
        }
        /* ========================
     Title
  ======================== */
        
        .sg_headline {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: flex-start;
        }
        
        .headline_left {
            display: flex;
            flex-direction: column;
        }
        
        .headline_right {
            display: flex;
            flex-direction: column;
            text-align: right;
            align-items: flex-end;
        }
        
        .headline_hp {
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .icon_arrow_down {
            display: flex;
            width: 77px;
            height: 77px;
            border-radius: 100px;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        
        .icon_arrow_down img {
            transition: 0.2s;
        }
        /* quando passi sopra, cambia il src */
        
        .icon_arrow_down img:hover {
            content: url('/assets/hp/scroll_icon_hover.svg');
        }
        /* ========================
     Slider
  ======================== */
        
        .slider-container {
            max-width: 1280px;
            overflow: hidden;
        }
        
        .slider-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        
        .slide {
            min-width: 200px;
            height: auto;
            overflow: hidden;
            padding: 20px;
            border-radius: 16px;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        /* ========================
     Grid
  ======================== */
        
        .sg_grid {
            display: flex;
            gap: 10px;
        }
        
        .columm-left,
        .columm-rigth {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        @media (min-width: 768px) {
            .sg_grid {
                flex-direction: row;
            }
            .columm-left,
            .columm-rigth {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                max-height: 800px;
            }
            .columm-left {
                width: 50%;
                gap: 10px;
            }
            .columm-left .image_top,
            .columm-left .image_bottom {
                flex: 1;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                height: 50%;
            }
            .columm-rigth {
                width: 50%;
            }
            .columm-rigth .image_full {
                height: 100%;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
        /* ========================
     Banners
  ======================== */
        
        .sg_banner {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        
        .sg_banner>div {
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            min-width: 0;
            /* Evita overflow su contenuti larghi */
        }
        /* Immagini full-width su mobile */
        
        .sg_banner div {
            flex: 1 1 100%;
            margin-bottom: 20px;
        }
        
        img {
            width: 100%;
            display: block;
        }
        
        .sg_other_projects p {
            margin: 0;
            padding-top: 10px;
        }
        /* Layout desktop / tablet */
        
        @media (min-width: 768px) {
            /* 33% / 66% */
            .sg_banner_33_66 .image_left {
                flex: 1 1 0;
            }
            .sg_banner_33_66 .image_right {
                flex: 2 1 0;
            }
            /* 50% / 50% */
            .sg_banner_50_50 .image_left,
            .sg_banner_50_50 .image_right {
                flex: 1 1 0;
            }
            /* 66% / 33% */
            .sg_banner_66_33 .image_left {
                flex: 2 1 0;
            }
            .sg_banner_66_33 .image_right {
                flex: 1 1 0;
            }
            /* 33% / 33% / 33% */
            .sg_banner_33_33_33 .image_left,
            .sg_banner_33_33_33 .image_center,
            .sg_banner_33_33_33 .image_right {
                flex: 1 1 0;
            }
        }
        /* ========================
     Badge
  ======================== */
        
        .badge .image_left,
        .badge .image_center {
            border-bottom: 1px #232120 solid;
            border-right: none;
        }
        
        @media (min-width: 768px) {
            .badge .image_left,
            .badge .image_center {
                border-right: 1px #232120 solid;
                border-bottom: none;
            }
            .image_center,
            .image_right {
                margin-left: 20px;
            }
        }
        /* ========================
     Typography
  ======================== */
        
        h1,
        h2 {
            font-style: normal;
            font-weight: 400;
            font-size: 44px;
            line-height: 110%;
            letter-spacing: -0.05em;
            margin: 0;
        }
        
        .subtitle {
            font-style: normal;
            font-weight: 400;
            font-size: 24px;
            line-height: 100%;
            letter-spacing: -0.05em;
        }
        
        .pre_footer p,
        .feature_title {
            font-size: 24px;
        }
        
        p {
            font-style: normal;
            font-weight: 400;
            font-size: 20px;
            line-height: 120%;
            letter-spacing: -0.05em;
        }
        
        .sg_text_dark {
            color: #232120;
        }
        
        .feature_title {
            font-size: 20px;
        }
        
        .feature_description {
            font-size: 16px;
            font-weight: 600;
        }
        
        .badge_capture {
            font-size: 18px;
        }
        
        .badge_value {
            font-size: 100px;
            line-height: 30px;
        }
        
        .opacity {
            opacity: 0.6;
        }
        
        .sg_text_light {
            color: #767676;
        }
        
        @media (min-width: 768px) {}
        /* ========================
     Masonry
  ======================== */
        
        .masonry_desktop {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 20px;
        }
        
        .item {
            border-radius: 16px;
            overflow: hidden;
        }
        
        .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 16px;
        }
        /* Layout specifico delle immagini */
        
        .grid_1_1 {
            grid-column: span 1;
            grid-row: span 1;
        }
        
        .grid_1_2 {
            grid-column: span 1;
            grid-row: span 2;
        }
        
        .grid_2_2 {
            grid-column: span 2;
            grid-row: span 2;
        }
        /* Responsive fallback */
        
        @media (max-width: 767px) {
            .masonry_desktop {
                display: none;
            }
            .masonry_mobile {
                display: block;
            }
        }
        
        @media (min-width: 768px) {
            .masonry_mobile {
                display: none;
            }
            .masonry_desktop {
                display: grid;
            }
        }
        /* ========================
     Breakpoints
  ======================== */
        /* Mobile is default (≤ 767px) */
        /* Tablet: ≥768px */
        
        @media (min-width: 768px) {
            h1,
            h2 {
                font-size: 64px;
            }
            .feature_title {
                font-size: 24px;
            }
            .feature_descripiotion {
                font-size: 18px;
            }
            footer {
                flex-direction: row;
                justify-content: space-between;
            }
            footer>div:nth-of-type(2) {
                text-align: right;
            }
            .footer_col>p:nth-of-type(1) {
                margin-top: 0;
            }
            footer>div {
                width: 50%;
            }
            .desktop_padding_left_100 {
                padding-left: 100px;
            }
            .desktop_padding_rigth_100 {
                padding-right: 100px;
            }
        }
        /* Desktop small: ≥1024px */
        
        @media (min-width: 1024px) {
            .desktop_spacing_bottom_160 {
                margin-bottom: 160px;
            }
            .desktop_spacing_bottom_100 {
                margin-bottom: 100px;
            }
            .desktop_spacing_bottom_80 {
                margin-bottom: 80px;
            }
            .desktop_spacing_bottom_70 {
                margin-bottom: 70px;
            }
            .pre_footer p {
                font-size: 38px;
            }
            .sg_headline {
                display: flex;
                flex-direction: row;
            }
            .sg_headline div {
                width: 50%;
            }
            .sg_banner {
                display: flex;
                flex-direction: row;
            }
        }
        /* Desktop huge: ≥1440px */
        
        @media (min-width: 1440px) {}