.area-content {
  grid-area: content;
  padding-right: 8px;
  padding-left: 8px;
}
.area-sidebar {
  grid-area: sidebar;
}
.area-output {
  grid-area: output;

}
.area-ip-output {
  grid-area: ip-output;
}

.wrapper {
  grid-auto-rows: min-content;
  display: grid;
  grid-gap: 0px;
  grid-template-areas: 
    "sidebar"
    "content"
    "output"
    "ip-output";
}

@media (min-width: 500px) {
  .wrapper {
    min-width: 1100px;
    grid-template-columns: 260px 4fr 188px;
    grid-template-rows:  auto 1fr;
    grid-template-areas:
      "sidebar    content output"
      "sidebar    content ip-output"
   }
   nav ul {
     flex-direction: column;
   }

  .nav-channel-toggle>li:hover .trim-100 {
    max-width: 60px;
  }
  .nav-channel-toggle>li:hover .trim-120 {
    max-width: 80px;
  }
  .nav-channel-toggle>li:hover .trim-140 {
    max-width: 100px;
  }
}

@media (min-width: 1400px) {
  .wrapper {
    grid-template-columns: 320px 3fr 188px 188px;
    grid-template-areas: 
      "sidebar content output ip-output"
   }
   nav ul {
     flex-direction: column;
   }

  .nav-channel-toggle>li .trim-100 {
    max-width: 160px;
  }
  .nav-channel-toggle>li:hover .trim-100 {
    max-width: 120px;
  }
  .nav-channel-toggle>li .trim-120 {
    max-width: 180px;
  }
  .nav-channel-toggle>li:hover .trim-120 {
    max-width: 140px;
  }
  .nav-channel-toggle>li .trim-140 {
    max-width: 200px;
  }
  .nav-channel-toggle>li:hover .trim-140 {
    max-width: 160px;
  }
  
}

/*
@media (min-width: 1600px) {
  .wrapper {
    grid-template-columns: 420px 3fr 188px 188px;
   }

  .area-sidebar .trim-80 {
    max-width: 240px;
  }
  .area-sidebar .trim-100 {
    max-width: 260px;
  }
}
*/