/* >>>>>>>>>>>>>>  Grid & FlexBox Layout <<<<<<<<<<<<<<< */

/* ------------- MAIN LAYOUT --------------- */

#grid {
  display: grid;
  grid-template-columns:  1fr minmax(auto, 105em) 1fr;
  grid-template-rows: 80px minmax(calc(100vh - 170px), auto) 80px;
  grid-gap: 5px;
}

#main-header {
  grid-column: 1/4;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 105em) 1fr;
}

#header-width {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 200px calc(100% - 400px) 200px;
  grid-template-rows: 70px;
}

#logo {
  grid-column: 1;
  grid-row: 1;
}

#main-nav {
  grid-column: 2;
  grid-row: 1;
  max-width: 100%;
}

#main-menu {
  display: flex;
  align-items: center;
}

.primary-main {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 200px minmax(auto, calc( 100% - 400px )) 200px;
  grid-template-rows: min-content auto;

}

.top-section {
  grid-column: 1/4;
  grid-row: 1;
}

.main-section {
  grid-column: 1/4;
  grid-row: 2;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(auto, calc(50% - 2.5em)) minmax(auto, calc(50% - 2.5em));
  grid-auto-rows: minmax(auto, 450px);
  gap: 5em;
}

.profile-content-section {
  grid-column: 1/4;
  grid-row: 2;
}


#main-footer {
  grid-column: 1/4;
  grid-row: 3;
}

#footer-width {
  display: flex;
  flex-direction: row;
}