@media(max-width:768px) {
	section#intro #intro_photo {
		height: 400px;
	}

	section#intro #intro_info {
		padding: 50px 20px;
	}

	section#details h2 {
		margin-bottom: 20px;
	}

	section#details #news.news_fullwidth {
		display: none;
	}

	section#details #news.news_mobile {
		display: inline;
	}

	section#details #amenities {
		grid-template-columns: repeat(2, 1fr);
	}

	section#photos #thumbnails {
		grid-template-columns: repeat(2, 1fr);
	}

	section#photos #before,
	section#photos #after {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}

	section#open_house #open_dates {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 30px;
	}

	section#open_house .container {
		width: 90%;
	}

	section#open_house form {
		width: 100%;
	}

	section#open_house form button {
		width: 100%;
		padding: 10px;
		font-size: 1.25rem;
	}

	nav.navbar {}

	nav.navbar .navbar-nav {
		display: flex;
	}

	nav.navbar .navbar-nav a {
		margin-bottom: 10px;
	}

	nav.navbar .navbar-nav a.active {}

	section#contact .container {
		width: 100%;
	}

	section#contact #realtor_box {
		width: 100%;
	}

	section#contact #realtor_content {
		height: 175px;
		width: calc(100% - 100px);
		padding: 25px 10px;
	}

	section#contact #realtor_content h3 {
		font-size: 1.5rem;
	}

	section#contact #realtor_content h4 {
		font-size: 1rem;
	}

	section#contact #realtor_headshot {
		width: 100px;
		height: 175px;
	}

	section#footer a img {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.before-after-item {
	  width: 50%;
	}
  }
  
  /* Keep one column on mobile screens only */
  @media (max-width: 767px) {
	.before-after-item {
	  width: 100%;
	}
  }
  
  /* Fix for responsive nav layout */
  @media (min-width: 992px) {
	nav.navbar .navbar-nav {
	  grid-template-columns: repeat(6, 1fr);
	}
  }
  
  @media (max-width: 991px) {
	nav.navbar .navbar-nav {
	  display: block;
	}
	
	nav.navbar .navbar-nav a {
	  margin-bottom: 10px;
	}
  }

  @media (max-width: 768px) {
	#banner h2 {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	#banner a {
	  margin-top: 10px; /* More space between text and button on mobile */
	}
  }