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

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