body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white; }

.container {
  width: 100%;
  position: relative;
  display: grid;
  min-height: 100vh; }
  .container__menu-box {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    background-color: #aaa;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 600px) {
      .container__menu-box {
        position: static;
        width: auto;
        margin: 0 20px; } }

.box-section {
  display: grid;
  grid-template-areas: "long-box long-box long-box" "center-box center-box center-box" "horizontal-box big-box-one big-box-two" "horizontal-box long-big-box long-big-box";
  gap: 20px;
  margin-left: 360px;
  justify-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  margin: 20px 30px 20px 360px; }
  @media screen and (max-width: 1024px) {
    .box-section {
      grid-template-areas: "long-box long-box long-box" "center-box center-box center-box" "horizontal-box big-box-one big-box-one" "horizontal-box big-box-two big-box-two" "horizontal-box long-big-box long-big-box"; } }
  @media screen and (max-width: 768px) {
    .box-section {
      grid-template-areas: "long-box long-box long-box" "center-box center-box center-box" "horizontal-box horizontal-box horizontal-box" "big-box-one big-box-one big-box-one" "big-box-two big-box-two big-box-two" "long-big-box long-big-box long-big-box"; } }
  @media screen and (max-width: 600px) {
    .box-section {
      margin-left: 20px; } }
  .box-section__box {
    background-color: #aaa;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center; }

.long-box {
  grid-area: long-box; }

.center-box {
  grid-area: center-box;
  width: 50%;
  margin: 0 auto; }
  @media screen and (max-width: 850px) {
    .center-box {
      width: auto; } }

.horizontal-box {
  grid-area: horizontal-box; }

.big-box-one {
  grid-area: big-box-one; }

.big-box-two {
  grid-area: big-box-two; }

.long-big-box {
  grid-area: long-big-box; }