---
import Root from '../layouts/Root.astro';
import Home from '../layouts/Simple.astro';

import { Picture } from 'astro:assets';
import home_banner from '../assets/img/home/home-banner.png'
import home_carreras from '../assets/img/home/home-carreras.png'
import home_cursos from '../assets/img/home/home-cursos.png'
import home_promo from '../assets/img/home/home-promo.png'
import home_blog from '../assets/img/home/home-blog.png'
import home_contact from '../assets/img/home/home-contact.png'
import home_acceso from '../assets/img/home/home-app.png'

---
<Root
  title="Home"
  description="Cursos y Carreras con alta demanda laboral a excelente precio, aprendizaje remoto, en tus propios tiempos y en Español. Consúltanos por nuestro programa de pasantías, y cambia tu futuro hoy mismo"
  path='/'
  prefetch
  theme='dark'>
  <Home className='' id='home'>
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-8 col-lg-6 col-xl-6 p-0">
          <a href="/about/">
            <Picture
              class="image-container"
              src={home_banner}
              alt="Profile"
              width={640}
              height={320}
            ></Picture>
          <a/>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-3 p-0">
          <a href="/carreras/devops/">
            <Picture
            class="image-container"
            src={home_carreras}
            alt="Profile"
            width={320}
            height={320}
            ></Picture>
          </a>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-3 p-0">
          <a href="/cursos/">
            <Picture
            class="image-container"
            src={home_cursos}
            alt="Profile"
            width={320}
            height={320}
            ></Picture>        
          </a>  
        </div>
        <div class="col-12 col-md-8 col-lg-6 col-xl-6 p-0">
          <Picture
          class="image-container"
          src={home_promo}
          alt="Profile"
          width={640}
          height={320}
          ></Picture>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-3 p-0">
          <Picture
          class="image-container"
          src={home_acceso}
          alt="Profile"
          width={320}
          height={320}
          ></Picture>          
        </div>
        <div class="col-3 col-md-2 col-lg-half-3 p-0">
          <a href="/blog/">
            <Picture
            class="image-container"
            src={home_blog}
            alt="Profile"
            width={160}
            height={320}
            ></Picture>
          </a>    
        </div>
        <div class="col-3 col-md-2 col-lg-half-3 p-0">
          <a href="/contact/">
            <Picture
            class="image-container"
            src={home_contact}
            alt="Profile"
            width={160}
            height={320}
            ></Picture>         
          </a>   
        </div>
      </div>
    </div>
  </Home>
</Root>

<style>
  .image-container {
      width: 100%;
      height: 100%;
    }

    @media (min-width: 992px) {
    .col-lg-half-3 {
      width: 12.5%;
      flex: 0 0 auto;
    }
  }
</style>