html{
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  background: url('../images/sitebouw/GideonBackgroundPerdix.webp')no-repeat center;
  height: 100vh;
  background-attachment: fixed;
  color: var(--clr-text);
  -webkit-background-size: cover;
  min-height: 100%;
}

#layout {
  display: grid;
  padding: 0 0.5rem;
  grid-template-columns:
    1fr repeat(4, minmax(0, 266px)) 1fr;
  grid-gap: 0px;
  grid-template-rows:
    min-content 8.5rem min-content min-content min-content min-content min-content min-content min-content;
  grid-template-areas:
    "header header header header header header"
    "banner banner banner banner banner banner"
    "title title title title title title"
    "section section section section section section"
    "column column column column column column"
    "profile profile profile profile profile profile"
    "content content content content content content"
    "fb-like fb-like fb-like footer-right footer-right footer-right"
    "footer footer footer footer footer footer"
  ;
}

.header {
  grid-area: header;
  background-color: var(--clr-bground-header);
}

.banner {
  grid-area: banner;
  background-image: url('../images/sitebouw/highQuality.webp');
  background-size: cover;
  background-position: center;
}

.licensing {
  grid-area: banner;
  background-image: url("../images/sitebouw/FindingYourLicense.webp");
}

.explained{
  grid-area: banner;
  background-image: url("../images/sitebouw/LeasingBeatsOnline.webp");
}

.title {
  grid-area: title;
  background-size: cover;
  display: grid;
  background-color: var(--clr-backgroundtext);
  place-content: center center;
}

.section {
  grid-area: section;
  background-color: var(--clr-backgroundtext);
  display: grid;
}

.section img {
  width: 100%;
}

.section blockquote{
  display: grid;
  width:96%;
  border-radius: 3rem;
}

.profile {
  grid-area: profile;
  background-color: var(--clr-backgroundtext);
  display: grid;
  padding: 1rem;
}

#content {
  grid-area: content;
  padding: 0.25rem;
}

.content {
  grid-area: content;
  display: grid;
  background-color: var(--clr-backgroundtext);
}

.content img {
  width: 100%;
  height: auto;
  margin: 4% auto;
}

.content iframe {
  margin: 1rem;
  border-radius: 0.9rem;
}

.content .exclusive {
  margin: 8rem;
}

.grid-cover {
  margin-bottom: 2rem;
  padding: 0.3rem;
}

.grid-cover a {
  text-decoration: none;
  font-weight: 600;
}

#column, #column3 {
  grid-area: column;
  grid-gap: 0.5rem;
  column-gap: black;
  background-color: var(--clr-backgroundtext);
}


.column-column {
  display: grid;
  padding: 1rem;
  margin:1.5rem 3.5rem;
  border-radius: 1rem;
  justify-content: center;
  font-size: 0.9rem;
  background-color: var(--clr-bground-column);
  /* box-shadow: 1rem 1rem 1rem hsl(0 0% 100%/ 0.3); */
}

.column-column img {
  width: 98%;
}

.column-3column{
  display: grid;
  justify-content: center;
  margin: 1rem;
  background-color: var (--clr-bground-text);
}

.column-3column img{
  width: 100%;
}

.footer {
  grid-area: footer;
  background-color: var(--clr-bground-footer);
  border-radius: 5px;
  display: grid;
  margin-top: auto;
}

.footer-item-1 {
  grid-column: 1/2;
}

.footer-item-2 {
  grid-column: 2/3;
  display: grid;
  justify-content: center;
}

.footer-item-3 {
  grid-column: 3/4;
  display: grid;
  justify-content: end;
}

.footer-item-4 {
  grid-column: 1/4;
  display: grid;
  justify-content: center;
  align-content: end;
}

@media screen and (min-width: 32rem) {
  #layout {
    grid-template-rows:
      6.5rem 24rem min-content min-content min-content min-content min-content min-content min-content;
    grid-template-areas:
      ". header header header header ."
      ". banner banner banner banner ."
      ". title title title title ."
      ". section section section section ."
      ". column column column column ."
      ". profile profile profile profile ."
      ". content content content content ."
      ". fb-like fb-like footer-right footer-right ."
      ". footer footer footer footer ."
    ;
  }

  .header {
    grid-area: header;
    display: grid;
    align-items: center;
    justify-content: center; /*deze verwijderen/toevoegen voor menu "nieuwe navNiftrik" */
  }

  .content {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    align-items: start;
    padding: 2rem;
    grid-auto-flow: dense;
  }

  .grid-cover img {
    display: grid;
    width: 60%;
    height: auto;
  }

  .grid-cover.grid-left {
    grid-column-start: 2;
  }

  .grid-cover.grid-right {
    grid-column-start: 1;
  }

  #column {
    grid-area: column;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .column-column{
    margin: 0;
  }

  .column-column .contract-btn {
    display: grid;
    justify-content: center;
    align-content: end;
  }
  #column3 {
    grid-area: column;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr; 
  }
  .column-3column img{
    width: 85%;
    padding: 1rem;
  }
}