/* this is a css comment */

/* div generated with https://grid.layoutit.com/ */
.container { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  */
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Logo Banner Banner Banner"
    "Navigation Navigation Navigation Navigation"
    "Splash Splash Splash Splash"
    "Heading Heading Heading Heading"
    "C1-image C1-text C1-text C1-text"
    "C2-image C2-text C2-text C2-text"
    "C3-image C3-text C3-text C3-text";
  background-image: linear-gradient(to right, #fbb7e5, #f4d7eb);
  }
  
  .Navigation {
    grid-area: Navigation;
    background-color: #f4d7eb;

  }
  /* div generated with https://www.cssportal.com/css-flexbox-generator/ */
  .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: flex-end;
    align-content: normal;
    he-ight: 10px; /* how do I set the hight of the damn box! */
  }

  .flex-items {
    /* pa-dding: 10px; */
    margin: 20px;
  }

  .flex-items:nth-child(1) {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-items:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-items:nth-child(4) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-items:nth-child(5) {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-items:nth-child(6) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    
  }

  .Navigation a {
    font-size: 22px;
    background-color: #f4d7eb;
    border: 1px solid #f76ecc;
    display: block;
    padding: 10px;
    border-radius: 4px;
    color: #000;
  }
  .Navigation a:hover {
    color: #f76ecc;
  }
  .Navigation a.active {
    cursor: default;
    color: #f76ecc;
  }
  .Navigation a.active:hover {
    cursor: default;
  }

  .Splash { grid-area: Splash; }
  
  .Banner { grid-area: Banner; }
  
  .Heading {
    grid-area: Heading; 
    background-color: #f4d7eb;
    text-align: center;
    border: 1px solid #f76ecc;
    display: block;
    border-radius: 4px;
    margin: 2%;
  }
  
  .C1-image { grid-area: C1-image; }
  
  .C2-image { grid-area: C2-image; }
  
  .C3-image { grid-area: C3-image;
    margin: 2%;
    padding-left: 2%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  
  .C1-text { grid-area: C1-text; 
    background-color: #f4d7eb;
    border: 1px solid #f76ecc;
    margin: 2%;
    padding-left: 2%;
    display: block;
    border-radius: 4px;
  }
  
  .C2-text { grid-area: C2-text; 
    background-color: #f4d7eb;
    border: 1px solid #f76ecc;
    margin: 2%;
    padding-left: 2%;
    display: block;
    border-radius: 4px;
  }
  
  .C3-text { grid-area: C3-text; 
    background-color: #f4d7eb;
    border: 1px solid #f76ecc;
    margin: 2%;
    padding-left: 2%;
    display: block;
    border-radius: 4px;
  }
  
  .Logo { grid-area: Logo; 
    background-color: azure;
    border: 1px solid #f76ecc;
    margin: 2%;
    padding-left: 2%;
    display: block;
    border-radius: 4px;
  }