/*------------------------------------*\
  #GRID-CONTAINER
\*------------------------------------*/

.grid-container {
  margin: 2.5rem auto 3.75rem;
  max-width: 69.4rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 2rem;
  grid-row-gap: 2.666rem;
}





/*------------------------------------*\
  #GRID-ITEMS
\*------------------------------------*/

.section-buttons {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.section-narrow-buttons {
  grid-column: 1 / span 2;
  grid-row: 3 / span 2;
}

.section-input-icons {
  grid-column: 1 / span 2;
  grid-row: 5 / span 7;
}

.section-heading {
  grid-column: 1 / span 3;
  grid-row: 11 / span 3;
}

.section-text {
  grid-column: 1 / span 3;
  grid-row: 14 / span 3;
}

.section-main-content {
  grid-column: 3 / span 4;
  grid-row: 1 / span 5;
}

.section-category-boxes {
  grid-column: 3 / span 2;
  grid-row: 6 / span 5;
  display: grid;
  grid-row-gap: 20px;
}

.section-sidebar-card {
  grid-column: 5 / span 2;
  grid-row: 6 / span 4;
}

.section-chat {
  grid-column: 4 / span 3;
  grid-row: 11 / span 5;
}





/*------------------------------------*\
  #ICON-WRAPER
\*------------------------------------*/

.icon-wraper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}





/*------------------------------------*\
  #ICON-WRAPER-ITEMS
\*------------------------------------*/

.section-icon-1 {
  grid-column:  1;
}

.section-icon-2 {
  grid-column:  2;
}





/*------------------------------------*\
  #FLOATING
\*------------------------------------*/

.header-wraper {
  width: 1110px;
  display: grid;
  grid-auto-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
}

.subscribe {
  grid-column: 1;
}

.logo {
  grid-column: 2;
  justify-self: center;
}

.grid-placeholder {
  grid-column: 3;
}