@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .row {
      max-width: 1024px;
      margin: 0 25px;
    }
  
    .intro-box {
      display: none;
    }
  
    .top-occ {
      flex-wrap: wrap;
      gap: 2em;
    }
  
    .top-occ__title {
      font-size: 1.2em;
    }
    
    .top-occ__details_1 {
      flex: 0 1 225px;
      order: 2;
    }
    .top-occ__details_2 {
      flex: 0 1 225px;
      order: 3;
    }
    .top-occ__img-section {
      order: 1;
    }
  
    .occ-overview-container {
      gap: 5rem 1rem;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 8rem;
    }
  
    .occ-show-container {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(6, 1fr);
      margin-bottom: 50px;
    }
    
    .occ-show-container .area-head {
      grid-row: 1 / 2;
      grid-column: 1 / 7;
    }
    
    .occ-show-container .area-image {
      grid-row: 2 / 6;
      grid-column: 1 / 7;
    }
    
    .occ-show-container .area-thumbs {
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      grid-row: 6 / 7;
      grid-column: 1 / 7;
      width: auto;
    }
    
    .area-thumbs .img-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .occ-show-container .area-details {
      grid-row: 7 / 9;
      grid-column: 1 / 4;
    }
  
    .occ-show-container .area-options {
      margin-top: 50px;
      padding: 6px;
      border-radius: 5px;
      grid-row-start: 7;
      grid-column: 1 / 7;
      grid-row: 9 / 10;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
  
    .area-description {
      grid-row: 10 / 11;
      grid-column: 1 / 4;
    }
    
    .area-contact {
      grid-row: 10 / 11;
      grid-column: 4 / 7;
    }
  
    .mobile-nav-icon {
      display: block;
    }
  
    .main-nav li {
      display: block;
    }
  
    .main-nav {
      display: none;
      float: right;
      width: 100%;
      margin: 10px 0;
    }
  
    .main-nav li {
      display: block;
      margin-left: 0;
      padding: 8px 0;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
  
    .main-nav li:last-child {
      border: none;
    }
  
    .main-nav li a:link {
      padding: 8px 0 7px 0;
      font-size: 80%;
    }
  
    .mobile-nav-icon {
      display: block;
    }
  
    .main-nav {
      display: none;
      float: right;
      width: 100%;
      margin: 10px 0;
    }
  
    .main-nav li {
      display: block;
      margin-left: 0;
      padding: 15px;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
    .main-nav li:last-child {
      border: none;
    }
  
    .main-nav li a:link {
      padding: 8px 0 7px 0;
      font-size: 1.1em;
    }
  }