/* Instagram follow links: the sidebar block (store.php), the footer line under the hours and the side-menu
   item (bottom.php). Kept out of master.css, which CodeKit compiles from the scss/ sources. */
/* Icon + "Follow us on Instagram": slightly faded until hovered */
#InstagramSide p.follow-ig a,
footer #contact p.follow-ig a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  opacity: 0.85;
  transition: opacity 0.3s;
}
#InstagramSide p.follow-ig a:hover,
footer #contact p.follow-ig a:hover {
  opacity: 1;
  text-decoration: underline;
}

#InstagramSide {
  margin-bottom: 25px;
}
#InstagramSide p.follow-ig {
  margin: 14px 0 0;
  text-align: center;
}
#InstagramSide p.follow-ig a {
  gap: 7px;
  color: #f15c22;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
}
/* the footer's white icon, recolored orange through a mask */
#InstagramSide p.follow-ig a::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #f15c22;
  -webkit-mask: url("../img/social-footer.png") -48px 0 / 64px 16px no-repeat;
  mask: url("../img/social-footer.png") -48px 0 / 64px 16px no-repeat;
}
/* the newest photos (inc/instagram.php), two to a row above the link */
#InstagramSide .ig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 10px 0; /* lines up with the text in #About */
}
#InstagramSide .ig-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #e9e5d8;
}
#InstagramSide .ig-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}
#InstagramSide .ig-grid a:hover img {
  opacity: 0.85;
}
@media all and (max-width: 1024px) {
  #InstagramSide { display: none; }
}

footer #contact p.follow-ig {
  margin-top: 16px;
}
footer #contact p.follow-ig a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../img/social-footer.png") -60px 0 / 80px 20px no-repeat;
}

#SideMenu > a.follow-ig::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: -2px 9px 0 0;
  background: url("../img/social-footer.png") -42px 0 / 56px 14px no-repeat;
  vertical-align: middle;
}