@charset "utf-8"; /* charset festlegen */
/* ************************************************ */
/* DATEI: gdnrw_GRID_artikel.css                    */
/* Style für Seiten des GD NRW                      */
/* ************************************************ */
/* "#" -> "id"-Selektor; "." -> "class"-Selektor    */
/* top, right, bottom, left                         */
/* ************************************************ */


/* ************************************************ */
/* Artikel | standard                               */
/* ************************************************ */
.grid_artikel_basis {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto auto;
  grid-gap: 1em;
  grid-template-areas: 
    "artikel_basis_bild"
    "artikel_basis_text"
    "artikel_basis_inhalt"
    "artikel_basis_info"
    "artikel_basis_kontakt"
  ;
  /*
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  color: #333333;
  */
}

@media only screen and (min-width: 768px) {       /* 768px */
  .grid_artikel_basis {
    display: grid;
    grid-template-columns: auto 280px;
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
    grid-template-areas: 
    "artikel_basis_bild    artikel_basis_kontakt"
    "artikel_basis_text    artikel_basis_info"
    "artikel_basis_inhalt  artikel_basis_inhalt"
    ;
  }
}

@media only screen and (min-width: 1366px) {
  .grid_artikel_basis {
    display: grid;
    grid-template-columns: auto 280px 280px;
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
    grid-template-areas: 
    "artikel_basis_bild    artikel_basis_kontakt   artikel_basis_info"
    "artikel_basis_text    artikel_basis_text      artikel_basis_info"
    "artikel_basis_inhalt  artikel_basis_inhalt    artikel_basis_inhalt"
    ;
  }
}
/* ************************************************ */

/* ################################################ */

/* ************************************************ */
/* Artikel | nur für "home.php" wegen "Geowärme"    */
/* Artikel | "artikel_basis_kontakt" für Logo       */
/* ************************************************ */
.grid_artikel_basis___home {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto auto;
  grid-gap: 1em;
  grid-template-areas: 
    "artikel_basis_kontakt___home"
    "artikel_basis_bild"
    "artikel_basis_text"
    "artikel_basis_inhalt"
    "artikel_basis_info"
  ;
  /*
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  color: #333333;
  */
}

@media only screen and (min-width: 768px) {       /* 768px */
  .grid_artikel_basis___home {
    display: grid;
    grid-template-columns: auto 280px;
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
    grid-template-areas: 
    "artikel_basis_text    artikel_basis_info"
    "artikel_basis_inhalt  artikel_basis_inhalt"
    "artikel_basis_bild    artikel_basis_kontakt"
    ;
  }
}

@media only screen and (min-width: 1366px) {       /* 1366px */
  .grid_artikel_basis___home {
    display: grid;
    grid-template-columns: auto 280px 280px;
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
    grid-template-areas: 
    "artikel_basis_text    artikel_basis_text      artikel_basis_info"
    "artikel_basis_inhalt  artikel_basis_inhalt    artikel_basis_inhalt"
    "artikel_basis_bild    artikel_basis_bild      artikel_basis_kontakt"
    ;
  }
}

/* ************************************************ */

.artikel_basis_kontakt___home {
  /*
  */
  display: grid;
  grid-area: artikel_basis_kontakt___home;
  padding: 0px 0px 0px 0px;
  word-wrap: break-word;
  background-color: #DCDCDC;
  /*
  min-width: 200px;
  max-width: 280px;
  */
}

@media only screen and (min-width: 768px) {       /* 768px */
  .artikel_basis_kontakt___home {
    display: none;
    grid-area: artikel_basis_kontakt___home;
    /*
    min-width: 200px;
    max-width: 280px;
    padding: 0px 0px 0px 0px;
    word-wrap: break-word;
    background-color: #DCDCDC;
    */
  }
}

@media only screen and (min-width: 1366px) {       /* 1366px */
  .artikel_basis_kontakt___home {
    display: none;
    grid-area: artikel_basis_kontakt___home;
  }
}

/* ************************************************ */

/* ################################################ */

/* ************************************************ */
.grid_artikel_basis_ohne_bild {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  grid-gap: 1em;
  grid-template-areas: 
    "artikel_basis_text"
    "artikel_basis_inhalt"
    "artikel_basis_info"
    "artikel_basis_kontakt"
  ;
}

@media only screen and (min-width: 768px) {
  .grid_artikel_basis_ohne_bild {
    display: grid;
    grid-template-columns: auto 280px;
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
    grid-template-areas: 
    "artikel_basis_text    artikel_basis_kontakt"
    "artikel_basis_text    artikel_basis_info"
    "artikel_basis_inhalt  artikel_basis_inhalt"
    ;
  }
}
/* ************************************************ */

/* ################################################ */

/* ************************************************ */
.grid_artikel_basis_ein_feld {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 1em;
  grid-template-areas: 
    "artikel_basis_inhalt"
  ;
  /*
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  color: #333333;
  */
}
/* ************************************************ */

/* ################################################ */

/* ************************************************ */
.artikel_basis_bild {
  /*
  display: grid;
  */
  grid-area: artikel_basis_bild;
  padding: 0px 0px 0px 0px;
}

.artikel_basis_kontakt {
  /*
  display: grid;
  */
  grid-area: artikel_basis_kontakt;
  padding: 0px 0px 0px 0px;
  word-wrap: break-word;
  background-color: #DCDCDC;
  /*
  min-width: 200px;
  max-width: 280px;
  */
}

.artikel_basis_text {
  /*
  display: grid;
  */
  grid-area: artikel_basis_text;
  padding: 0px 0px 0px 0px;
  /* 
  background-color: #FF9999;
  */
}

.artikel_basis_info {
  /*
  display: grid;
  */
  grid-area: artikel_basis_info;
  padding: 0px 0px 0px 0px;
  word-wrap: break-word;
  /* 
  background-color: #DCDCDC;
  background-color: #99FF99;
  min-width: 200px;
  max-width: 280px;
  */

  
  /* 
  display: flex; 
  justify-content: flex-start; 
  align-items: flex-start;
  */
}

.artikel_basis_inhalt {
  display: grid;
  grid-area: artikel_basis_inhalt;
  /*
  */
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 10px 0px;
  /*
  */
}
/* ************************************************ */

/* ################################################ */

/* ************************************************ */
.grid_artikel_0 {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  grid-gap: 1em;
}
/* ************************************************ */


/* ************************************************ */
.grid_artikel_1 {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 1em;
  grid-template-areas: 
    "text"
    "info"
  ;
}

@media only screen and (min-width: 768px) {
  .grid_artikel_1 {
    display: grid;
    grid-template-columns: auto auto 280px;
    grid-template-rows: auto;
    grid-gap: 1em;
    grid-template-areas: 
      'text   text   info'
    ;
  }
}

@media only screen and (min-width: 1366px) {
  .grid_artikel_1 {
    display: grid;
    grid-template-columns: auto auto auto 280px;
    grid-template-rows: auto;
    grid-gap: 1em;
    grid-template-areas: 
      'text   text   text   info'
    ;
  }
}
/* ************************************************ */


/* ************************************************ */
.grid_artikel_2 {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 1em;
  grid-template-areas: 
    "bild"
    "text"
    "info"
  ;
}

@media only screen and (min-width: 768px) {
  .grid_artikel_2 {
    display: grid;
    grid-template-columns: auto auto 280px;
    grid-template-rows: auto auto;
    grid-gap: 1em;
    grid-template-areas: 
      'bild   bild   info'
      'text   text   info'
    ;
  }
}

@media only screen and (min-width: 1366px) {
  .grid_artikel_2 {
    display: grid;
    grid-template-columns: auto auto auto 280px;
    grid-template-rows: auto auto;
    grid-gap: 1em;
    grid-template-areas: 
      'bild   bild   bild   info'
      'text   text   text   info'
    ;
  }
}
/* ************************************************ */


/* ************************************************ */
.grid_artikel_3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1em;
  margin: 0px 0px 10px 0px;
  /*
  padding: 0px 0px 0px 0px;
  */
}
/* ************************************************ */


/* ************************************************ */
.grid_fuss_direkt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1em;
  /*
  */
}
/* ************************************************ */


/* ************************************************ */
.grid_fuss_direkt_block {
  /*
  background-color: #DCFFDC;
  word-wrap: break-word;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; 
  */
}
/* ************************************************ */




/* ************************************************ */
.box1 {
  color: #333333;
  border-radius: 0px;
  border: 0px solid #FFCCCC;
}

.box2 {
  color: #333333;
  border-radius: 0px;
  border: 0px solid #FFCCCC;
}
/* ************************************************ */




/* ************************************************ */
.bild {
  display: grid;
  grid-area: bild;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*
  background-color: #FF9999;
  */
}

.text {
  display: grid;
  grid-area: text;
  margin: 0px 0px 0px 0px;
  padding: 10px 0px 10px 0px;
  /*
  background-color: #FFFFFF;
  */
  /* 
  justify-items: start;
  align-items: start;
  justify-content: start;
  align-content: start;
  justify-self: start;
  align-self: flex-start;
  align-content: start;
  */
}

.info {
  display: grid;
  grid-area: info;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /* 
  background-color: #99FF99;
  */
}
/* ************************************************ */




/* ************************************************ */
/* 
.artikel_basis_bild {
  display: flex;
  flex-wrap: wrap;
}
*/

.artikel_basis_bild img {
  width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*
  object-fit: cover;
  */
}

.artikel_basis_text img {
  width: 100%;
  height: auto;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  /*
  max-width: 400px;
  object-fit: cover;
  */
}


.artikel_basis_inhalt img {
  width: 100%;
  height: auto;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  /*
  max-width: 400px;
  object-fit: cover;
  */
}

.bild img {
  width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*
  object-fit: cover;
  */
}
/* ************************************************ */




/* ************************************************ */
.leaflet-container img {
  /* 
  damit für die Icons in Leaflet nicht der prozentuale Wert für images 
  aus dem GRID-Style genommen und eine Anzeige verhindert wird 
  */
  width: initial;
  height: auto;
}

.artikel {
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px solid #990099;
  outline: none;
}

.artikel_mit_bildunterschrift {
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px solid #990099;
  outline: none;
  background-color: #DCDCDC;
}

.artikel_mit_bildunterschrift p.bildunterschrift {
  font-size: 0.9em;
  font-style: italic;
  color: #666666;
  color: #000000;
  width: 99%;
  margin: 0px 0px 12px 0px;
  padding: 10px 5px 0px 5px;
  overflow: auto;
}
.grid_teaser {
  display: grid;
  background-color: #FF9933;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.grid_teaser img {
  width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  /*
  */
}

.img_originalgroesse img {
  width: auto; 
  max-width: 100%; 
  height: auto;
}

.text .artikel p img {
  /*
  margin: 40px 0px 10px 0px;
  */
  margin: 20px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  line-height: 1.0em;
}

.grid_ganze_breite {
  /*
  background-color: #FF3399;
  */
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
/* ************************************************ */




/* ************************************************ */
.responsive_image {
  width: 100%;
  height: auto;
}

.responsive_image_background {
  width: 100%;
  height: auto;
  background-image: url('beispiel.png');
  background-size: cover;
}
/* ************************************************ */




/* ************************************************ */
.artikel_verlinkt:focus{
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /* 
  background-color: #CCCCCC; 
  */
}
.artikel_verlinkt:hover{
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  background-color: #EDEDED;
  /*  */
}
.artikel_verlinkt:active{
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /* 
  background-color: #CCCCCC; 
  */
}
/* ************************************************ */




/* ************************************************ */
/* --- Links allgemein --- */
.artikel_verlinkt a:link {
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /*
  */
}
.artikel_verlinkt a:visited {
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /*
  */
}
.artikel_verlinkt a:focus {
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /* 
  cursor: url(../image/gd_cur.gif); 
  */
}
.artikel_verlinkt a:hover {
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /*
  cursor: url(../image/gd_cur.gif);
  */
}
.artikel_verlinkt a:active {
  color: #000000;
  text-decoration: none;
  outline: none;
  border-style: none;
  /*
  */
}
/* ************************************************ */




/* ************************************************ */
.artikel_trenner {
  clear: both;
  position: relative;
  height: 30px;
  color: #CCCCCC;
  background-color: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: right;
  vertical-align: top;
  border-top: 1px dotted #CCCCCC;
}
/* ************************************************ */


/* ************************************************ */
.bereich_2spaltig {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-gap: 1em;
  grid-template-areas: 
      "bereich_2spaltig_rechts"
      "bereich_2spaltig_links"
  ;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  color: #333333;
}

@media only screen and (min-width: 768px) {
  .bereich_2spaltig {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-gap: 1em;
    grid-template-areas: 
      "bereich_2spaltig_links  bereich_2spaltig_rechts"
    ;
    margin: 0px 20px 0px 20px;
    padding: 0px 0px 0px 0px;
    color: #333333;
  }
}

.bereich_2spaltig_links {
  grid-area: bereich_2spaltig_links;
}

.bereich_2spaltig_rechts {
  grid-area: bereich_2spaltig_rechts;
}


/* ************************************************ */


/* ************************************************ */
.bereich_3spaltig {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  grid-gap: 1em;
  grid-template-areas: 
    "bereich_3spaltig_links  bereich_3spaltig_mitte  bereich_3spaltig_rechts"
  ;
  margin: 0px 20px 0px 20px;
  padding: 0px 0px 0px 0px;
  color: #333333;
}
/* ************************************************ */


/* ************************************************ */
.artikel h1 {
  /*
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  line-height: 1.3em;
  */
}
.artikel p {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 5px 0px;
 text-align: left; 
 /*
 */
}



.homepage {
  background-color: #E0E0E0;
  margin: 0px 0px 20px 0px;
  padding: 0px 0px 10px 0px;
}

.homepage h1 {
  margin: 0px 8px 0px 10px;
  padding: 0px 0px 0px 0px;
}

.homepage p {
  margin: 0px 10px 0px 10px;
  padding: 0px 0px 0px 0px;
}

.homepage ul {
  margin: 10px 10px 0px 15px;
  padding: 0px 0px 0px 0px;
}

.homepage li {
  /*
  list-style-image: url(../image/achtung.svg);
  margin-bottom: 1rem;
  */
  list-style-type: none;
  background: url(../image/achtung.svg) no-repeat 0px 2px;
  padding: 0px 0px 15px 30px;
}

.artikel p.bildunterschrift,
.bildunterschrift2er1 p,
.bildunterschrift2er2 p {
  font-size: 0.9em;
  font-style: italic;
  color: #666666;
  width: 99%;
  margin: 0px 0px 12px 0px;
  padding: 0px 0px 0px 0px;
  overflow: auto;
  /* 
  text-align: center;
  border: 0px solid #999999;
  */

}
.bildunterschrift2er1 {
  float: left;
  width: 250px;
  margin: 0px 12px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.bildunterschrift2er2 {
  float: left;
  width: 250px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

/* --- Mittelteil - ... - Bereich Artikel - Absatz für GoToTop-Button --- */
.artikel p.goto_top {
  font-style: italic;
  text-align: right;
  margin: 0px 0px 0px 0px;
  padding: 10px 0px 5px 0px;
}

/*  JETZT IN gdnrw_inhalte.css !!!
.artikel a.l_top {
  background-image: url("../button/l_nachoben.png");
  background-repeat: no-repeat;
  background-position: center right;
  padding: 0px 16px 0px 0px;
}
*/

/* --- Mittelteil - ... - Bereich Artikel - Bilder - für rechtsseitigen Fließtext --- */
.img_float {
  float: left;
  background-color: transparent;
  margin: 4px 10px 5px 0px;
  padding: 0px 0px 0px 0px;
}

/* --- Mittelteil - ... - Bereich Artikel - Bilder - mit Rahmen für rechtsseitigen Fließtext --- */
.img_nofloat {
  background-color: transparent;
  margin: 4px 0px 5px 5px;
  padding: 0px 0px 0px 0px;
}

/* --- Mittelteil - ... - Bereich Artikel - Bilder - mit Rahmen für rechtsseitigen Fließtext --- */
.img_oben_mittel {
  background-color: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.img_oben_gross{
  width: 830px;
  border: 0px solid #999999;
  margin: 0px 0px 18px -2px;
  padding: 0px 0px 0px 0px;
}

/* --- Mittelteil - ... - Bereich Artikel - Bilder - mit Rahmen für rechtsseitigen Fließtext --- */
.img_float_rahmen {
  float: left;
  background-color: transparent;
  margin: 4px 10px 5px 0px;
  padding: 0px 0px 0px 0px;
  border: 1px solid #999999;
}

/* --- Mittelteil - ... - Bereich Artikel - Bilder - mit Rahmen für rechtsseitigen Fließtext --- */
.img_rahmen {
  background-color: transparent;
  margin: 4px 0px 5px 0px;
  padding: 0px 0px 0px 0px;
  border: 1px solid #999999;
}

.img_start {
  background-color: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 8px 0px;
  border: 0px solid #999999;
}

/* --- Mittelteil - ... - Bereich Artikel - Liste ueber ul li --- */
.artikel ul.ul1 {
  list-style-position: outside;
  list-style-image: url(../button/liste_1.gif);
  text-indent: 0px;
  margin: 10px 0px 10px 40px;
  padding: 0px 0px 0px 0px;
}

.artikel ul.ul1 li { /* jedes Element li unterhalb von ul.ul1 im Bereich artikel */
  margin: 0px 0px 0px 0px;
  padding: 0px 10px 4px 0px;
}

/* --- Mittelteil - ... - Bereich Artikel - Liste ueber ul li - klein --- */
.artikel ul.ul2 {
  list-style-position: outside;
  list-style-image: url(../button/liste_2.gif);
  text-indent: 0px;
  margin: 3px 0px 0px 15px;
  padding: 0px 0px 0px 0px;
}

.artikel ul.ul2 li {
  padding: 0px 10px 2px 0px;
}

/* --- Tabellen farbig abwechselnd hinterlegen --- */
.tabelle_wechsel {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px solid #CCCCCC;
  text-align: left;
}

.tabelle_wechsel tr:nth-child(even) {
  background-color: #FFFFFF;
  margin: 20px 20px 20px 20px;
  padding: 20px 20px 20px 20px;
  color: #404040;
}

.tabelle_wechsel tr:nth-child(odd) {
  background-color: #EAF2D3;
  margin: 20px 20px 20px 20px;
  padding: 20px 20px 20px 20px;
  color: #000000;
} 

/* --- Absätze farbig abwechselnd hinterlegen !!! Überschriften werden auch berücksichtigt !!! --- */
.p_wechsel {
}

.p_wechsel p:nth-of-type(even) {
  background-color: #FFFFFF;
  color: #404040;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px 5px 5px;
}

.p_wechsel p:nth-of-type(odd) {
  background-color: #EAF2D3;
  color: #000000;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px 5px 5px;
}

.p_wechsel p:first-letter {
  font-size: 1.3em; 
  font-weight: normal
}


  /* 
  es gibt 6 Eigenschaften GRID-Elemente zu positionieren

  ------------------------------------------------
  justify the grid items along the row axis
  ------------------------------------------------
  justify-items: stretch;
  justify-items: start;
  justify-items: end;
  justify-items: center;

  ------------------------------------------------
  align the grid items along the column axis
  ------------------------------------------------
  align-items: stretch;
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: baseline;
  align-items: initial;
  align-items: inherit;

  ------------------------------------------------
  when the entire grid is smaller than the space for the grid container
  justify the grid along the row axis
  ------------------------------------------------
  justify-content: stretch;
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;

  ------------------------------------------------
  align the grid content along the column axis
  ------------------------------------------------
  align-content: stretch;
  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
  align-content: initial;

  ------------------------------------------------
  align a grid item along the row axis
  style="align-self: center;"
  ------------------------------------------------
  justify-self: start;
  justify-self: end;
  justify-self: center;
  justify-self: flex-start;
  justify-self: flex-end;
  justify-self: self-start;
  justify-self: self-end;
  justify-self: left;
  justify-self: right;

  ------------------------------------------------
  align a grid item along the column axis
  style="align-content: center;"
  ------------------------------------------------
  align-self: auto;
  align-self: stretch;
  align-self: center;
  align-self: flex-start;
  align-self: flex-end;
  align-self: baseline;
  align-self: initial;
  align-self: inherit;
  */