@media (max-width: 575px) {
   .news-item {
      flex-wrap: wrap;
      gap: 0 20px;
      padding: 5px;
   }

   .news-date {
      align-items: start;
      flex: 1;
      justify-content: start;
   }

   .news-text {
      flex: 1 0 100%;
   }
}

/* ========================== *
 * ## Hamburger on Tablets ##
 * ========================== */
@media (max-width: 768px) {
   body[id] .menu {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 995;
      display: grid;
      align-items: normal;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 62px 1fr;
      grid-template-areas:
          "logo hamburger"
         "items items";
      height: 62px;
      flex-direction: column;
      justify-content: flex-start;
      background: #fff;
   }

   body[id] .menu ul {
      display: block;
      padding: 0;
      margin: 0;
      padding-top: 30px;
      list-style-type: none;
   }

   body[id] .menu ul li {
      display: block;
      margin: 0px;
   }

   body[id] .menu ul li a {
      text-transform: uppercase;
      height: 46px;
      padding: 10px;
      padding-left: 15px;
      font-size: 20px;
      font-weight: bold;
      line-height: normal;
      display: block;
      color: #005667;
   }

   body[id] .menu .items {
      grid-area: items;
      background: #DBEBEE;
      display: none;
      overflow-y: auto;
      padding: 0;
   }

   body[id] .menu .hamburger {
      grid-area: hamburger;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
   }

   body[id] .menu .hamburger a {
      display: inherit;
   }

   body[id] .menu .nav-icon {
      display: inline-block;
      width: 30px;
   }

   body[id] .menu .nav-icon:after,
   body[id] .menu .nav-icon:before,
   body[id] .menu .nav-icon div {
      background-color: #666;
      border-radius: 2px;
      content: "";
      display: block;
      height: 3px;
      margin: 6px 0;
      transition: all 0.2s ease-in-out;
   }

   body[id] .menu.open {
      height: 100vh;
   }

   body[id] .menu.open .nav-icon:after {
      transform: translateY(-9px) rotate(-135deg);
   }

   body[id] .menu.open .nav-icon:before {
      transform: translateY(9px) rotate(135deg);
   }

   body[id] .menu.open .nav-icon div {
      background-color: #fff;
      transform: scale(0);
   }

   body[id] .menu.open .items {
      display: block;
   }
}