.main-infos {
    .infos {
        .basket {
            margin-block: 1.5rem;
        }
        @media (min-width: 40rem) {
            grid-column: span 6 / span 6;
        }
        @media (min-width: 80rem) {
            grid-column: span 5 / span 5;
        }
    }
    .variants {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        .variant {
            border-radius: 0.125rem 0.5rem 0.125rem 0.5rem;
            border: 1px solid var(--c-mapped-blue);
            /* max-width: 10rem; */
            font-size: 0.875rem;
            cursor: pointer;
            transition:
                background-color var(--transition),
                color var(--transition);
            &:hover {
                background-color: var(--c-green);
                color: var(--c-title);
            }
            &:has(:checked) {
                background-color: var(--c-mapped-blue);
                color: var(--c-white);
            }

            ul {
                padding: 0.25rem;
            }
            img {
                border-radius: inherit;
            }
            input {
                display: none;
            }
        }
    }
    .basket {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    @media (min-width: 80rem) {
        .breadcrumb {
            grid-column: 2 / -2;
        }
    }
}

.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: 100%;
        }
    }
    @media (min-width: 40rem) {
        grid-column: span 6 / span 6;
    }
    @media (min-width: 80rem) {
        grid-template-columns: subgrid;
        grid-column: span 5 / span 5;
        grid-column-start: 2;
        .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 4 / span 4;
        }
    }
}

select[name="product"] {
    border-radius: 0.125rem 0.5rem 0.125rem 0.5rem;
    border: 1px solid var(--c-mapped-blue);
    background-color: transparent;
    padding: 0.25rem;
}