/*
 * file_name = empresa__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = this file contains CSS styles used for the main landing page for the [Empresa] section
 *
 * descripción = este archivo contiene estilos CSS usados para el índice principal de la sección [Empresa] 
 *
 */

/*=================================================================
               STYLES FOR [EMPRESA] AREA WEB PAGE
              ESTILOS PARA LA PÁGINA WEB [EMPRESA]
===================================================================*/


div.empresa__container
{
             /* background: coral                 ; */
             column-gap: 2rem                    ;
                display: grid                    ;
    grid-template-areas: "  splash__image  links "  ;
  grid-template-columns: 1fr  1.5fr                ;
}


img.empresa__splash_image
{
          grid-area: splash__image       ;
              width: 100%                ; 
}

div.empresa__links
{
              grid-area: links                    ;
              /* display: grid; */

}


h1.empresa__page_title
{
    /* background: lightsalmon   ; */
  margin-right: 12%             ;
}


a.empresa__link,
a.empresa__link--dead
{
             /* background: lavender                   ; */
          border-radius: 20px                         ;
                  color: black                      ;
             column-gap: 2rem                         ;
                display: grid                         ;
              grid-area: link                         ;
    grid-template-areas: "  link__icon  link__text "  ;
  grid-template-columns: 4rem 1fr                     ;
          margin-bottom: 0rem                         ;
                padding: 0.75rem 1rem                 ;
        text-decoration: none                         ;
             transition: all 0.6s                     ;
                  width: 90%                          ;
}


a.empresa__link:hover
{
  /* border: solid 2px lightslategray   ; */
      box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.3);
}


a.empresa__link--dead:hover
{
  cursor: default;
}


img.empresa__link__icon
{
              /* background: lightblue             ; */
               grid-area: link__icon              ;
            margin-right: 4rem                    ;
                   width: 80%                     ;
}

h2.empresa__link_title
{
  /* background: lightyellow; */
  text-align: left   ;
}

p.empresa__link_description
{
  font-size: 1.1rem;
}

div.empresa__link__text
{
               grid-area: link__text              ;
}




/* Display layout for narrower screens (e.g. tablets and smart phones)
   All the content is displayed in a single column, instead of 2 columns
   
   Adaptar el diseño de página para pantallas más estrechase (p.e. tabletas, teléfonoso)
   Todo el contenido se organiza en una sola columna en vez de 2 columnas
*/
@media only screen and (max-width: 700px)
{
  div.empresa__container
  {
      grid-template-areas:
                          '     splash__image           '
                          '     links                   '
                                                        ;

    grid-template-columns: 1fr                      ;
                  margin: 0rem 0rem 2rem 5%0rem        ;
  }

  div.empresa__links
  {
                margin: 0rem 5% 2rem 5%                    ;
                /* display: grid; */

  }

  h1.empresa__page_title
  {
    margin-right: 0             ;
  }
}