h3 {
    color: var(--gin-color-primary);
}

/* Mobile Layout | Distribucion Movil */
.page-sections {
    display: flex;
    flex-direction: column;
    gap: var(--nav-bar-height);

    .section {
        align-items: center;
        display: flex;
        flex-direction: column;
        min-height: var(--section-height);
        justify-content: center;

        div#section_1.anchor {
            position: absolute;
            top: 0px;
        }
    }

    .section.section-2 {
        min-height: var(--last-section-height);
        justify-content: end;
    }

    .background-image {
        background-image: url('/modules/custom/smlogistica/media/backgrounds/coming-soon-bg.jpeg');
        background-position: center;
        background-size: cover;
        height: auto;
        left: 0px;
        min-height: var(--section-height);
        position: absolute;
        top: var(--nav-bar-height);
        width: 100%;
        z-index: 0;
    }

    .container {
        height: auto;
        margin: auto;
        max-width: 1440px;
        text-align: center;
        width: 100%;
        z-index: 1;
        box-sizing: border-box;
    }

    .container:has(div.block) {
        background-color: white;
        border-radius: var(--gin-border-l);
        box-shadow: var(--gin-shadow-l1);
        padding: var(--gin-spacing-m);
        max-width: var(--container-block-width);
    }

    .slogan-block.container {
        margin: var(--gin-spacing-m) auto;

        img {
            height: auto;
            margin-bottom: var(--gin-spacing-l);
            width: 180px;
        }

        h3 {
            font-size: clamp(16px, 1.8vw, 36px);
            margin: var(--gin-spacing-xxs) 0px;
            white-space: nowrap;
            color: var(--gin-color-button-text);
            letter-spacing: clamp(0.5px, 0.1vw, 1.5px);
        }
    }

    .sub-section {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: var(--gin-spacing-m) auto;
        width: 100%;
    }

    .shippings-completes-block.container {
        width: -moz-available;
        width: -webkit-fill-available;
        width: 100%;

        .block {
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 100%;

            .counter-block,
            .completes-percentage-block {
                width: 100%;
            }

            h3 {
                margin-top: unset;
            }

            .div-line {
                border: 1px solid var(--gin-border-color);
                height: 120px;
                margin: 0 10px;
            }
        }
    }

    .transports-block.container.mobile-layout {

        img,
        svg {
            height: auto;
            width: var(--transports-block-logos-width);
        }

        svg * {
            color: var(--gin-color-primary);
            fill: var(--gin-color-primary);
        }

        .block-item {
            margin: 10px 0;
            padding: 0 10px;
        }
    }


    .transports-block.container.desktop-layout {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--gin-spacing-xl);
        height: var(--transports-block-height);
        position: relative;
        background: unset;
        transition: transform var(--gin-transition-fast);

        .block-item-fixed,
        .block-item {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: var(--gin-spacing-s);
            width: var(--transports-block-logos-width);

            svg * {
                color: var(--gin-bg-layer);
                fill: var(--gin-bg-layer);
            }

            >object,
            >svg,
            >img {
                width: var(--transports-block-logos-width);
                height: auto;
                position: absolute;
            }
        }

        .block-item.correo_argentino {

            >object,
            >svg,
            >img {
                width: calc(var(--transports-block-logos-width) - calc(var(--transports-block-logos-width) * 0.17));
            }
        }
    }

}

.about-block.container {
    display: flex;
    width: 100%;
    margin: unset;
    height: calc(var(--last-section-height) - var(--transports-block-height));

    .description {
        padding: 0px var(--gin-spacing-xl);
        text-align: left;
        font-size: var(--gin-font-size-xl);

        h3 {
            font-size: calc(var(--gin-font-size-m) * 2);
            margin-top: -8px;
        }
    }

    .about-image {
        background-image: url('/modules/custom/smlogistica/media/backgrounds/nosotros-bg.jpg');
        background-position: center;
        background-size: cover;
        width: 100%;
    }

    .about-image,
    .description {
        max-width: 50%;
        height: auto;
    }
}

/* Desktop Layout | Distribucion de Escritorio */

/* ----- [Media Queries] ----- */

@media (min-width: 1440px) {
    html:has(body):root {
        --transports-block-logos-width: 280px;
    }

    body.path-nosotros .page-content,
    .smlogistica.home.page-content {
        .slogan-block.container {
            margin-top: var(--gin-spacing-xl);

            img {
                width: 240px;
            }

            h3 {
                margin: var(--gin-spacing-m) 0px;
            }
        }

        .shippings-completes-block.container {
            max-width: 420px;
            font-size: var(--gin-font-size-xl);
            margin: var(--gin-spacing-xl) auto;

            .div-line {
                height: 180px;
            }

            h3 {
                font-size: var(--gin-font-size-h2);
            }
        }

        .transports-block.container.desktop-layout {
            gap: var(--gin-spacing-xxl);
        }

        .about-block.container {
            .description {
                font-size: var(--gin-font-size-h3);

                h3 {
                    font-size: calc(var(--gin-font-size-m) * 3);
                    margin-top: -12px;
                }

            }

            .about-image {
                margin-bottom: var(--gin-spacing-xl);
                border-radius: var(--gin-border-l);
                box-shadow: var(--gin-shadow-l1);
                max-height: 1080px;
            }
        }
    }
}

@media (max-width: 1023px) {
    @media (orientation: portrait) {

        body.path-nosotros .page-content,
        .smlogistica.home.page-content {
            .about-block.container {
                height: var(--last-section-height);
                flex-direction: column;
                gap: var(--gin-spacing-l);
                justify-content: start;

                .about-image {
                    height: 240px;
                    max-width: 100%;
                }

                .description {
                    font-size: var(--gin-font-size-l);
                    max-width: 100%;
                    text-align: center;

                    h3 {
                        font-size: var(--gin-font-size-h2);
                        margin-top: 0px;
                        text-align: center;
                    }
                }

                .description:not(.smlogistica.home.page-content .about-block.container .description) {
                    padding: 0px;
                }
            }
        }
    }


    .smlogistica.home.page-content .page-sections .slogan-block.container h3 {
        color: var(--gin-color-primary);
    }

    @media (orientation: landscape) {
        html:has(body):root {
            --transports-block-logos-width: clamp(160px, 20vw, 240px);
        }

        body.path-nosotros .about-block.container,
        .smlogistica.home.page-content .about-block.container {
            height: var(--last-section-height);

            .description {
                font-size: var(--gin-font-size-m);

                h3 {
                    font-size: var(--gin-font-size-h1);
                    margin-top: 0px;
                }
            }
        }

        .transports-block.container.mobile-layout {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    a.toolbar-icon.toolbar-icon-notifications.toolbar-item,
    .toolbar-tab:has(>.app-install-button) .app-install-button {
        gap: unset;

        span {
            display: none;
        }
    }
}

@media (max-width: 767px) {
    @media (orientation: landscape) {

        body.path-nosotros .page-content,
        .smlogistica.home.page-content {
            .about-block.container {
                .description {
                    padding: 0px var(--gin-spacing-m);
                    font-size: var(--gin-font-size-s);
                }
            }
        }
    }
}

@media (max-width: 411px) {
    html:has(body):root {
        --transports-block-logos-width: 160px;
    }

    @media (orientation: portrait) {

        body.path-nosotros .page-content,
        .smlogistica.home.page-content {

            .about-block.container {

                .about-image {
                    height: 180px;
                    max-width: 100%;
                }

                .description {
                    font-size: var(--gin-font-size-m);
                    max-width: 100%;
                }
            }
        }
    }
}

@media (max-width: 320px) {
    html:has(body):root {
        --side-menu-width: 100vw;
        --side-menu-left: calc(-1 * var(--side-menu-width));
        --container-block-width: 90vw;
        --transports-block-logos-width: 130px;
    }

    .shippings-completes-block.container {
        font-size: var(--gin-font-size-s);
    }
}