/*                                                                      */
/* 		                   PROMO - DESKTOP UP             		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL desktop.css    */
/*                                                                      */
/*                                                                      */


  div.promo {
    width: 245px;
  }
  section#main-select div.promo {
    width: 240px;
  }
  section.content.promos div.promo {
    /* width is still 33% from tablet */
  }
  section#main-select div.promo {
  }
  section#main div.promo:first-of-type {
    border-width: 0 5px 5px 0;
  }

  div.promo h3,
  div.promo p {
  }
  div.promo h3 a {
  }


/* **************************************** */
/*          EMPTY ASIDE                     */
/* **************************************** */

  aside:empty:after {
    content: '';
    display: block;
    width: 100%;
    height: 300px;
    /*background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );*/
    border-radius: var(--border-radius-main);
  }


/* **************************************** */
/*          HORIZONTAL PROMOS                */
/* **************************************** */

  section.content.promos div.promo {
    float: left;                            /* ARP 3 has a content section of horizontal promos  */
    width: calc( ( 100% - 2 * var(--grid-margin) ) / 3 );
    height: auto;                           /* Remove the fixed height at tablet (could also use inherit) */
    margin-left: var(--grid-margin);
    /* Image is on top at desktop, instead of on left */
    padding-left: 10px;             /* Was var(--left-margin); */
    padding-right: 10px;            /* Was var(--left-margin); */
    padding-top: calc( var(--promo-image-height) + 20px );  /* 20px between image and text is wide enough */
    margin-bottom: 0;                           /* Now alongside each other, so no need for bottom margin */
    border-radius: var(--border-radius-smaller);
  }
  section.content.promos div.promo:first-of-type {
    margin-left: 0%;
  }
  section.content.promos div.promo:before {
    border-radius: var(--border-radius-smaller);
    width: 100%;
    height: var(--promo-image-height);
  }