:root {
  --columns: 5;
  --rows: 4;
  --sidebar-background: #1992d4;
  --header-background: #ffffff;
  --grid-background: #e2e8f0;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
}

.grid {
  background-color: var(--grid-background);
  display: grid;
  grid-template-columns: repeat(var(--columns), auto);
  grid-template-rows: repeat(var(--rows), auto);
  grid-template-areas:
    "sidebar header header header header"
    "sidebar header header header header"
    "sidebar main main main main"
    "sidebar main main main main"
    "footer footer footer footer footer";
}

/* header */

.grid > header {
  background-color: var(--header-background);
  grid-area: header;
  padding: 32px;

  --columns: 1;
  --rows: 2;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--columns), auto);
  grid-template-rows: repeat(var(--rows), auto);
}

/* header top */

.grid > header > div:first-child {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(5, auto);
  grid-template-areas:
    "search search search . buttons";
}

.grid > header > div:first-child > div:first-child {
  grid-area: search;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto 3fr;
  gap: 16px;
  align-items: center;
}

.grid > header > div:first-child > div:first-child > input {
  background-color: var(--grid-background);
  border: none;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  height: 40px;
}

.grid > header > div:first-child > div:last-child {
  grid-area: buttons;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: end;
  gap: 24px;
}

/* header bottom */

.grid > header > div:last-child {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(5, auto);
  grid-template-areas:
    "user user user . actions";
}

.grid > header > div:last-child > div:first-child {
  grid-area: user;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 24px;
  align-items: center;
}

.grid > header > div:last-child > div:last-child {
  grid-area: actions;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  align-items: center;
  justify-content: end;
  gap: 24px;
}

.grid > header > div:last-child > div:last-child > button {
  font-size: 18px;
  width: 100px;
  border: none;
  border-radius: 20px;
  color: white;
  background-color: var(--sidebar-background);
  padding:  8px 16px;
}

/* sidebar */

.grid > aside {
  background-color: var(--sidebar-background);
  grid-area: sidebar;
  color: white;
  padding: 24px;

  display: grid;
  grid-auto-rows: min-content;
  gap: 32px;
}

.grid > aside > div {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: 24px;
  align-items: center;
}

.grid > aside > ul,
.grid > aside > ul {
  display: grid;
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.grid > aside > ul > li,
.grid > aside > ul > li {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: 24px;
  align-items: center;
}

/* main */

.grid > main {
  grid-area: main;
  padding: 16px;

  --columns: 3;
  --rows: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  grid-template-rows: repeat(var(--rows), auto);
  gap: 16px;
  grid-template-areas:
    "projects projects aside"
    "projects projects aside";
}

.grid > main > div {
  grid-area: projects;
}

.grid > main > div > section {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid > main > div > section > article {
  padding: 16px 16px 16px 24px;
  border-radius: 8px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border-left: 8px solid #f0b429;
  min-height: 250px;
  display: grid;
}

.grid > main > div > section > article > p {
  color: #9d9d9d;
}

.grid > main > div > section > article > div {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.grid > main > aside {
  grid-area: aside;

  display: grid;
  grid-auto-rows: min-content;
  gap: 24px;
}

.grid > main > aside > div:nth-child(1) > div {
  padding: 24px;
  border-radius: 8px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.grid > main > aside > div:nth-child(1) > div > * > h5 {
  margin: 0;
}

.grid > main > aside > div:nth-child(1) > div > * > p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #9d9d9d;
}

.grid > main > aside > div:nth-child(1) > div > *:not(:last-child) {
  border-bottom: 1px solid #d4d4d4;
  margin-bottom: 8px;
}

.grid > main > aside > div:nth-child(2) > ul {
  padding: 24px;
  border-radius: 8px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  
  display: grid;
  gap: 16px;
}

.grid > main > aside > div:nth-child(2) > ul > li {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  align-items: center;
  gap: 16px;
}

.grid > main > aside > div:nth-child(2) > ul > li > img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.grid > main > aside > div:nth-child(2) > ul > li > div > p {
  margin: 0;
}

/* media */

@media screen and (max-width: 768px) {
  .grid {
    grid-template-areas:
    "header header header header header"
    "header header header header header"
    "main main main main main"
    "sidebar sidebar sidebar sidebar sidebar"
    "footer footer footer footer footer";
  }

  .grid > main {
    grid-template-areas:
    "projects projects projects"
    "aside aside aside";
  }
}

@media screen and (max-width: 1024px) {
  .grid > main {
    grid-template-areas:
      "projects projects projects"
      "aside aside aside";
  }

  .grid > header > div:first-child {
    grid-template-areas:
    "search search search search search"
    "buttons buttons buttons buttons buttons";
    gap: 16px;
  }

  .grid > header > div:first-child > div:last-child,
  .grid > header > div:last-child > div:last-child {
    justify-content: center;
  }

  .grid > header > div:last-child {
    grid-template-areas:
    "user user user user user"
    "actions actions actions actions actions";
    gap: 16px;
  }
}