@import url('./heroCarrossel.css');
body {
    main {
        row-gap: 48px;

        #velas, #essencias, #outros, #moldes, #ceras, #pavios {
            scroll-margin-top: 3rem;
        }

        .container {
            position: relative;
            display: flex;
            flex-direction: column;
            row-gap: 48px;
            margin: 0 auto;
            overflow: hidden;
        }

        .container-cards {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;

            &:nth-of-type(1) {
                padding-top: 0;
            }

            > header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: var(--dark-gray);
                margin: 0 0 32px 0;
                padding: 0 16px;

                h2 {
                    font-size: 1.5rem !important;
                }
            }

            > section {
                display: flex;
                column-gap: 16px;
                width: 100%;
                padding: 16px 4px;
                overflow-x: scroll;
                scroll-behavior: smooth;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
        }

        .container__escolha-ecoaroma {
            display: grid;
            justify-content: center;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 200px 200px;
            column-gap: 1rem;
            row-gap: 1rem;
            margin: 0 auto;
            padding: 3rem 1rem;


            > h2 {
                grid-column: span 2;
                text-align: center;
                font-size: 32px;
                font-weight: 500;
                text-transform: initial;
                color: var(--dark-brown);
            }

            .card {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;
                width: 100%;
                height: 75%;
                border-radius: 1rem;
                background-color: var(--white);
                box-shadow: 0px 0 20px rgba(0, 0, 0, .1);
                margin-top: auto;
                padding: 1rem;
                transition: .3s ease-in;
                scale: 1;

                &:hover {
                    scale: 1.05;
                }

                span {
                    position: absolute;
                    top: -35%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 1rem;
                    width: 100px;
                    aspect-ratio: 1 / 1;
                    background-color: var(--white);
                    border-radius: 50%;
                    border: 1px solid var(--gray);
                    overflow: hidden;

                    i {
                        opacity: .5;
                        font-size: 3rem;
                    }

                }

                &:nth-of-type(1) {
                    span {
                        i {
                            color: var(--green);
                        }
                    }
                }

                &:nth-of-type(2) {
                    span {
                        i {
                            color: var(--rose);
                        }
                    }
                }

                &:nth-of-type(3) {
                    span {
                        i {
                            color: var(--sky-blue);
                        }
                    }
                }

                > section {
                    height: 75%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    row-gap: .5rem;

                    > h3 {
                        font-size: 20px;
                        font-weight: 600;
                        text-transform: initial;
                        text-align: center;
                        color: var(--dark-brown);
                    }
                }
            }
        }

        .banner {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 32px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            &.medium {
                width: 100%;
                max-width: 1300px;
                min-height: 180px;
                aspect-ratio: 16 / 4;
                border-radius: 0;
                margin: 0 auto;
            }
        }
    }
}

@media (min-width: 576px) {
    body {
        main {
            #velas, #essencias, #outros, #moldes, #ceras, #pavios {
                scroll-margin-top: 9.25rem;
            }
        }
    }
}

@media (min-width: 991px) {
    body {
        main {
            .container__escolha-ecoaroma {
                justify-content: center;
                grid-template-columns: repeat(4, minmax(200px, 250px));
                grid-template-rows: auto 250px;

                h2 {
                    grid-column: span 4;
                }
            }

            .banner {
                &.medium {
                    border-bottom-left-radius: 100px;
                    border-top-right-radius: 100px;
                }
            }
        }
    }
}