/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * central stylesheet - layout example "flexible-grids"
 *
 * @copyright       Copyright 2005-2012, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 */

/* Google Font API */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);

/* import core styles | Basis-Stylesheets einbinden */
@import url(../yaml/core/base.css);

/* Nur die tatsächlich verwendeten YAML-Stile bleiben eingebunden. */
@import url(../yaml/forms/gray-theme.css);
@import url(../yaml/screen/typography.css);
@import url(../yaml/screen/screen-FULLPAGE-layout.css);

/*
 * Die Fahrzeugübersicht ist im alten YAML-Markup in zwei 50%-Hälften
 * verschachtelt. Dadurch entstehen zwischen den vier Karten unterschiedliche
 * Innenabstände. Nur für diese zweite Info-Box und nur am Desktop wird die
 * verschachtelte Darstellung deshalb zu einem gleichmäßigen Vierer-Raster
 * zusammengeführt. Das mobile YAML-Verhalten bleibt unangetastet.
 */
@media screen and (min-width: 761px) {
  main .ym-wbox > section.box.info:nth-of-type(2) > .ym-grid.linearize-level-1 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2.5em;
  }

  main .ym-wbox > section.box.info:nth-of-type(2) > .ym-grid.linearize-level-1 > p {
    grid-column: 1 / -1;
  }

  main .ym-wbox > section.box.info:nth-of-type(2) > .ym-grid.linearize-level-1 > .ym-g50,
  main .ym-wbox > section.box.info:nth-of-type(2) > .ym-grid.linearize-level-1 > .ym-g50 > .ym-grid {
    display: contents;
  }

  main .ym-wbox > section.box.info:nth-of-type(2) article.ym-g50 {
    float: none;
    margin: 0;
    width: auto;
    min-width: 0;
  }

  main .ym-wbox > section.box.info:nth-of-type(2) article.ym-g50 > .ym-gbox-left,
  main .ym-wbox > section.box.info:nth-of-type(2) article.ym-g50 > .ym-gbox {
    padding-left: 0;
    padding-right: 0;
  }

  main .ym-wbox > section.box.info:nth-of-type(2) .example-image {
    display: block;
    width: 100%;
    height: auto;
  }
}