.product-history {
    .product-history__container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: var(--padding-top) 0 var(--padding-bottom) 0;

        @media screen and (min-width: 768px) {
            gap: 0;
        }

        .product-history__content {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--gap-mobile);
            padding-top: 8px;
            background-color: var(--background-primary);

            @media screen and (min-width: 768px) {
                flex-direction: row;
                padding: 16px;
                gap: var(--gap-desktop);
                align-items: var(--align-items);
            }

            &:nth-child(even) {
                background-color: var(--background-secondary);

                @media screen and (min-width: 768px) {
                    flex-direction: row-reverse;
                }
            }

            .product-history__image-container {
                position: relative;
                height: var(--image-height-mobile);
                width: var(--image-width-mobile);

                @media screen and (min-width: 768px) {
                    height: var(--image-height-desktop);
                    width: var(--image-width-desktop);
                }

                .product-history__image-text-container {
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    overflow: hidden;
                    align-items: var(--align-items);
                    justify-content: var(--justify-content);
                    padding: 8px;

                    @media screen and (min-width: 768px) {
                        padding: 16px;
                    }

                    p,
                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    .h0,
                    .h1,
                    .h2,
                    .h3,
                    .h4,
                    .h5 {
                        color: var(--color);
                        text-align: var(--text-align);

                        &:first-child {
                            margin-top: 0;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }

                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    .h0,
                    .h1,
                    .h2,
                    .h3,
                    .h4,
                    .h5 {
                        margin: 12px 0;
                    }
                }

                .product-history__image {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }

            .product-history__text-container {
                width: 100%;
                background-color: var(--text-background-color, transparent);

                @media screen and (min-width: 768px) {
                    height: stretch;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                &.product-history__text-container--with-background {
                    padding: 8px;
                }

                .metafield-rich_text_field {
                    display: flex;
                    flex-direction: column;

                    @media screen and (min-width: 768px) {
                        padding: 16px 32px;
                    }
                }

                p {
                    color: var(--text-color), #2b2b2b;
                    margin: 0;
                }

                h2 {
                    color: var(--text-color), #2b2b2b;
                    margin-top: 0;
                    margin-bottom: 12px;
                }
            }
        }
    }
}