@media only screen and (min-width: 769px) and (max-width: 820px) and (orientation: portrait) {

  .input-box {
    color: #ffffff; /* Dark grayish-blue */
  }
  
  .container.map-view .places-overlay {
    width: 90%;
    left: 5%;
  }

  .grid-container {
    grid-template-columns: 1fr;
    margin: 0px;
  }

  .places-overlay, .events-overlay {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px;
  }

  .map-wrapper, .places-overlay, .image-grid-container {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .event-location-distance,
  .event-item,
  .event-details-container .event-dates,
  .event-dates,
  .event-dates ul li,
  .description-container p, .description-text {
    font-size: 10px;
  }

  .events-overlay {
    height: auto;
    overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
  }

  .events-overlay-content {
    position: static;
    width: auto;
    height: auto;
    overflow-y: visible;
    padding: 0;
  }

  .event-item {
    margin-left:2px;
    margin-right:2px;
  }
  
  .events-list {
    display: inline-flex;
    padding: 0 10px;
  }

  .event-details-container h5 {
    font-size: 17px; /* Reduced by 2px */
  }

  .event-details-container p {
    font-size: 11px;
  }

  .find-out-more-container p, .find-out-more-container a {
    font-size: 13px; /* Increased by 2px */
  }

  .list-title {
    display: none;
  }

  .places-overlay {
    height: fit-content;
    overflow-y: visible;
    overflow-x: auto;
  }

  .places-overlay-content {
    position: static;
    width: auto;
    height: fit-content;
    overflow-y: hidden;
    padding: 0;
  }

  .places-list {
    display: inline-flex;
    padding: 0 2px;
    margin: 0;
  }

  .places-overlay-content p {
    margin: 0;
  }

  .place-item,
  .title-distance-container,
  .title-distance-container h5,
  .place-category,
  .title-distance-container p,
  .place-moreinfo-container {
    font-size: 14px; /* Reduced by 2px */
  }

  .place-item {
    margin-left:2px;
    margin-right:2px;
  }
  
  .place-item p {
    white-space: nowrap;
    margin-top: 5px;
  }

  .image-grid-container {
    grid-column: 1 / 3;
    grid-row: 3;
    margin-left: 20px;
    margin-right: 20px;
  }

  .image-element-class {
    position: relative;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    width: calc(50% - 40px);
    box-sizing: border-box;
  }
}