'use client'

import Image from "next/image"

export default function Component() {

    return (
        <div
            className='w-full bg-linear-gradient'
        >
            <div
                className='flex justify-between items-end m-auto max-w-7xl h-20 px-3   /* small */
                            md:px-3 md:h-calc-2                                         /* middle */
                            xl:max-w-7xl xl:h-96                                        /* xlarge */
                            '>
                <h1
                    className='self-center text-center text-lg leading-normal font-bold w-full  /* small */
                                md:text-left md:text-calc-1 md:w-2/5                            /* middle */
                                xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5             /* xlarge */
                                '
                // style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
                >

                    Free, official online office tutorials by WPS Academy
                </h1>
                <div
                    className='hidden
                                md:flex md:h-calc-1 /* midle */
                                xl:h-80 xl:w-3/5    /* xlarge */
                                '>
                    <Image
                        className='w-full h-full'
                        src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
                        alt={'big img'}
                    />
                </div>
            </div>
        </div>
    )
}