import { Title } from '../../ui/Title';

export function Distance() {
  return (
    <div
      itemScope
      itemType="http://schema.org/Distance"
      className="lg:py-[100px] py-14"
    >
      <Title className="lg:w-4/5 lg:mb-14 mb-6">
        Обучающая платформа GRAFF interactive позволяет осуществлять{' '}
        <span className="text-gradient">дистанционную практику</span> с любого
        устройства
      </Title>
      <div className="sm:grid lg:grid-cols-12 gap-x-4 gap-y-6">
        <p className="lg:col-start-1 max-sm:mb-6 col-span-6 row-start-1 text-xl">
          Обучающиеся будут получать доступ к системе с высокодетализированной
          3D&#8209;графикой для прохождения сценариев на любом устройстве,
          без необходимости установки дополнительного ПО.
        </p>
        <div className="lg:col-start-1 max-sm:mb-4 col-span-6 row-start-2 self-stretch">
          <img
            src="/images/distance/datamining_2.jpg"
            alt="дистанционное обучение с любого устройства"
            className="object-cover object-[bottom_-1px_left_-1px]"
          />
        </div>
        <div className="lg:col-start-7 lg:col-span-6 col-span-3 row-start-2 self-stretch">
          <img
            src="/images/distance/datamining_1.jpg"
            alt="дистанционное обучение с любого устройства"
            className="object-cover object-[bottom_-1px_left_50%] h-full"
          />
        </div>
      </div>
    </div>
  );
}
