:root {
    --section-gap-mobile: 2.5rem;
}

.container__hero {
    width: 100%;
    height: 9.75rem;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #22371f;

    video {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        object-fit: cover;
    }

    h1 {
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    p {
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.container__se-encontram {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: var(--page-max);
    display: grid;
    gap: 1.5rem;
    margin: 1.625rem auto 2rem;

    article {
        display: grid;
        gap: 0.875rem;
    }

    h2 {
        /* max-width: 21rem; */
        color: var(--aunare-purple);
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.28;
        letter-spacing: 0;

        strong {
            font-weight: 600;
        }
    }

    p {
        /* max-width: 20rem; */
        color: var(--medium-text);
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.38;
    }

    .segmentos-visuais {
        display: grid;
        gap: 1.25rem;
    }

    figure {
        min-height: 8.625rem;
        position: relative;
        overflow: hidden;
        border-radius: 0.5rem;

        > img:first-child {
            width: 100%;
            height: 100%;
            min-height: inherit;
            object-fit: cover;
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8) 48%, rgba(255, 255, 255, 0));
        }
    }

    .segmento-logo {
        width: 5.25rem;
        position: absolute;
        left: 1.625rem;
        bottom: 1.125rem;
        z-index: 1;
    }
}

.container__nosso-mercado {
    display: grid;
    gap: 1.5rem;
    margin: 0 0 var(--section-gap-mobile);

    > h2 {
        color: var(--aunare-purple);
        font-size: 1.75rem;
        font-weight: 400;
        line-height: 1.2;
        text-align: center;
    }

    .mercado-grupo {
        display: grid;
        gap: 1.125rem;
        padding-bottom: 1rem;
        border-bottom: 0.25rem solid var(--aunare-green);

        h3 {
            color: var(--aunare-green);
            font-size: 1.375rem;
            font-weight: 400;
            line-height: 1.2;
            text-align: center;
        }
    }

    .mercado-grupo.life-science {
        border-bottom-color: var(--aunare-turquoise);

        h3 {
            color: var(--aunare-turquoise);
        }
    }

    .mercado-cards {
        width: 100%;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0.875rem;
        overflow-x: auto;
        padding: 0 1rem 0.125rem;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        article {
            height: 6rem;
            display: grid;
            grid-auto-columns: 12rem;
            place-items: center;
            align-content: center;
            gap: 0.5rem;
            padding: 0.75rem;
            border: 1px solid var(--light-border);
            border-radius: 0.5rem;
            background: var(--white);
            box-shadow: 0 0.1875rem 0.625rem rgba(76, 31, 81, 0.04);
        }

        img {
            width: 1.25rem;
            height: 1.25rem;
            object-fit: contain;
        }

        h4 {
            color: var(--aunare-purple);
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.2;
            text-align: center;
        }
    }
}

.container__porque-escolher-aunare {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: var(--page-max);
    display: grid;
    gap: 1.75rem;
    margin: 0 auto 2.5rem;

    h2 {
        text-align: center;
        color: var(--aunare-green);
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .diferenciais {
        display: grid;
        gap: 2.5rem;
        
        article {
            max-width: 17rem;
            display: grid;
            grid-template-rows: 2rem auto 1fr;
            justify-items: center;
            gap: 0.625rem;
            margin: 0 auto;
            text-align: center;
    
            img {
                width: 1.5rem;
                height: 1.5rem;
                object-fit: contain;
            }
    
            h3 {
                color: var(--aunare-purple);
                font-size: 0.875rem;
                font-weight: 600;
                line-height: 1.25;
            }
    
            p {
                color: var(--medium-text);
                font-size: 0.8125rem;
                font-weight: 400;
                line-height: 1.24;
            }
        }
    }

}

@media (min-width: 576px) {
    .container__porque-escolher-aunare {
        .diferenciais {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2rem;
        }
    }
}

@media (min-width: 768px) {
    .container__hero {
        height: 18rem;
    }

    .container__se-encontram {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 36%);
        align-items: center;
        gap: 3rem;
        margin-top: 4rem;
        margin-bottom: 4rem;

        h2 {
            max-width: 28rem;
            font-size: 2.25rem;
        }
    }

    .container__nosso-mercado {
        gap: 2rem;

        > h2 {
            font-size: 2.5rem;
        }

        .mercado-grupo {
            gap: 1.5rem;
            padding-bottom: 2.75rem;
        }

        .mercado-cards {
            max-width: var(--page-max);
            margin: 0 auto;

            article {
                grid-auto-columns: 9rem;
            }
        }
    }

    .container__porque-escolher-aunare {
        gap: 2.75rem;
        margin-bottom: 4rem;

        h2 {
            font-size: 2.25rem;
            text-align: center;
        }

        .diferenciais {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 2rem;
        }
    }
}

@media (min-width: 992px) {
    .container__se-encontram {
        p {
            font-size: 1rem;
        }
    }

    .container__nosso-mercado {
        .mercado-cards {
            article {
                height: 6.5rem;
                grid-auto-columns: 9.5rem;
                justify-content: center;
                border-radius: 1rem;

                h4 {
                    font-size: 1rem;
                    line-height: 1.3;
                    font-weight: 400;
                }
            }
        }
    }

    .container__porque-escolher-aunare {
        gap: 2.75rem;
        margin-bottom: 4rem;

        h2 {
            font-size: 2.25rem;
            text-align: center;
        }

        .diferenciais {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 2rem;

            article {
                h3 {
                    font-size: 1.125rem;
                }
                p {
                    font-size: 1rem;
                }
            }
        }
    }
}

@media (min-width: 1200px) {
    .container__hero {
        height: 28.25rem;
    }

    .container__se-encontram {
        max-width: 68rem;
        grid-template-columns: minmax(0, 1fr) 24rem;
        margin-top: 3.25rem;
    }

    .container__nosso-mercado {
        margin-bottom: 3.5rem;
    }
}