.hero {
    row-gap: var(--grid-gap);
    .hero_text {
        align-self: center;
        @media (min-width: 60rem) {
            grid-column: span 6 / span 6;
        }
        @media (min-width: 80rem) {
            grid-column: span 4 / span 4;
        }
    }

    .hero_video {
        margin-inline: calc(-1 * var(--container-x));
        video {
            aspect-ratio: 16/9;
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        .progress-bar {
            height: 0.75rem;
            background-color: var(--c-green);
            .progress {
                --progress: 0%;
                height: 100%;
                background-color: var(--c-title);
                width: var(--progress);
                transition: width 250ms linear;
            }
        }
        @media (min-width: 60rem) {
            grid-column: span 6 / span 6;
            margin-left: 0;
            margin-block: calc(-1 * var(--container-y));
        }
        @media (min-width: 80rem) {
            grid-column: span 8 / span 8;
        }
    }
}

.main-product {
    h2 {
        order: -1;
    }

    .infos {
        .basket {
            margin-block: 1.5rem;
        }
        .more {
            display: block;
            color: var(--c-mapped-blue);
            text-decoration: underline;
            transition: color var(--transition);
            &:hover {
                color: var(--c-title);
            }
        }
        @media (min-width: 40rem) {
            grid-column: span 6 / span 6;
        }
    }
}
.il-thumb-gallery {
    display: grid;
    align-self: flex-start;
    gap: var(--grid-gap);
    .thumbs-container {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        button {
            border: 1px solid transparent;
            border-radius: 0.25rem 1rem 0.25rem 1rem;
            transition: border-color var(--transition);
            color: var(--c-mapped-blue);
            max-width: 6rem;
            min-width: 4rem;
            &[data-video] {
                position: relative;
                svg {
                    position: absolute;
                    inset: 0;
                    margin: auto;
                }
            }
            &:hover {
                border-color: var(--c-green);
            }
            &.current {
                border-color: var(--c-mapped-blue);
            }
        }
        img {
            cursor: pointer;
            width: fit-content;
        }
    }
    @media (min-width: 40rem) {
        grid-column: span 6 / span 6;
    }
    @media (min-width: 80rem) {
        grid-template-columns: subgrid;
        .thumbs-container {
            grid-column: span 1 / span 1;
            flex-direction: column;
            max-width: unset;
            button {
                max-width: unset;
            }
        }
        .full-image {
            order: 1;
            grid-column: span 5 / span 5;
        }
    }
}
.universe {
    box-shadow: inset 0 0 0.5rem
        color(from var(--c-mapped-blue) srgb r g b / 0.5);
    h2 {
        text-align: center;
    }
    .text {
        @media (min-width: 40rem) {
            grid-column: span 10 / span 10;
            grid-column-start: 2;
        }
        @media (min-width: 60rem) {
            grid-column: span 8 / span 8;
            grid-column-start: 3;
        }
        @media (min-width: 80rem) {
            grid-column: span 6 / span 6;
            grid-column-start: 4;
        }
    }
    .il-button {
        margin-inline: auto;
    }
}
.current_deal {
    .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        background-color: var(--c-green);
        margin-inline: calc(-1 * var(--container-x));
        padding-inline: var(--container-x);
        /* margin-bottom: calc(-1 * var(--container-y)); */
        padding-block: var(--container-y);
        color: var(--c-white);
        font-family: var(--font-serif);
        font-size: 2rem;
        line-height: 1.2;
        @media (min-width: 20rem) {
            font-size: 2.185rem;
        }
        @media (min-width: 40rem) {
            font-size: 2.3125rem;
        }
        @media (min-width: 60rem) {
            font-size: 2.5rem;
        }
        @media (min-width: 80rem) {
            font-size: 2.6875rem;
        }
    }
    .img {
        margin-inline: calc(-1 * var(--container-x));
        img {
            height: 100%;
        }
    }
    @media (min-width: 60rem) {
        .text {
            grid-column: span 6 / span 6;
            margin-right: calc(-1 * var(--grid-gap));
            padding-right: var(--grid-gap);
            /* margin-bottom: 0; */
        }
        .img {
            grid-column: span 6 / span 6;
            margin-left: 0;
            padding-left: 0;
        }
    }
}

.diffuseurs,
.huiles {
    & > .il-button {
        margin-inline: auto;
    }
}