/* A quiet social ending after the appointment and opening hours. */
.photo-concept .instagram-section {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  grid-template-areas: 'intro posts' 'buttons posts' '. note';
  column-gap: clamp(32px, 4vw, 58px);
  row-gap: 18px;
  align-items: start;
  padding: 64px max(var(--gutter), calc((100% - 1080px) / 2)) 37px;
  background: linear-gradient(180deg, #242139 0, #ded2e5 15px, #f5eff6 37px, var(--paper) 94px);
  border-bottom: 1px solid #b8a9bf38;
  color: var(--ink);
}
.photo-concept .instagram-section .instagram-intro {
  grid-area: intro;
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
}
.photo-concept .instagram-section .instagram-intro .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 10px;
  color: var(--plum);
}
.photo-concept .instagram-section .instagram-intro .eyebrow::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
}
.photo-concept .instagram-section .instagram-intro h2 {
  margin: 14px 0 6px;
  font-size: clamp(31px, 3vw, 39px);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.photo-concept .instagram-section .instagram-intro > a {
  min-height: 38px;
  margin: 0;
  color: var(--muted);
  border-bottom-color: #b8a9bf80;
  font-size: 12px;
}
.photo-concept .instagram-section .social-row {
  grid-area: posts;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  width: 100%;
  max-width: 730px;
  min-width: 0;
  margin: 0;
}
.photo-concept .instagram-section .social-tile {
  display: block;
  position: relative;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}
.photo-concept .instagram-section .social-tile img {
  display: block;
  width: 100%;
  height: clamp(112px, 10.5vw, 148px);
  max-width: 100%;
  margin: 0 0 12px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 32%;
  border: 1px solid #9f88b12b;
  transform: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.photo-concept .instagram-section .social-tile:first-child img { box-shadow: 4px 4px 0 #e5d9ec; }
.photo-concept .instagram-section .social-tile span {
  display: block;
  max-width: 21ch;
  padding: 0 2px 0 0;
  overflow-wrap: anywhere;
}
.photo-concept .instagram-section .social-tile:hover img,
.photo-concept .instagram-section .social-tile:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 4px 5px 0 #e5d9ec;
}
.photo-concept .instagram-section > .brand-socials {
  grid-area: buttons;
  align-self: start;
  gap: 9px;
  margin: 0;
}
.photo-concept .instagram-section .social-button {
  min-height: 44px;
  padding: 11px 13px;
  gap: 7px;
  font-size: 11px;
  line-height: 1;
}
.photo-concept .instagram-section .facebook-button {
  color: var(--plum);
  background: transparent;
  border-color: #b8a9bf;
}
.photo-concept .instagram-section .social-button:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 #e6d9ee;
}
.photo-concept .instagram-section .social-note {
  grid-area: note;
  max-width: 55ch;
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 1000px) and (min-width: 761px) {
  .photo-concept .instagram-section { grid-template-columns: 200px minmax(0, 1fr); gap: 18px 28px; }
  .photo-concept .instagram-section .social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
  .photo-concept .instagram-section .social-tile { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 12px; }
  .photo-concept .instagram-section .social-tile img { height: 85px; margin: 0; }
  .photo-concept .instagram-section .social-tile span { font-size: 11px; }
}
@media (max-width: 760px) {
  .photo-concept .instagram-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'intro' 'posts' 'buttons' 'note';
    gap: 24px;
    padding: 53px var(--gutter) 29px;
    background: linear-gradient(180deg, #242139 0, #ded2e5 12px, #f5eff6 29px, var(--paper) 75px);
  }
  .photo-concept .instagram-section .instagram-intro h2 { font-size: 34px; margin-top: 11px; }
  .photo-concept .instagram-section .instagram-intro > a { min-height: 35px; }
  .photo-concept .instagram-section .social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 18px; max-width: 460px; }
  .photo-concept .instagram-section .social-tile img { height: clamp(115px, 36vw, 154px); margin-bottom: 10px; }
  .photo-concept .instagram-section .social-tile span { display: block; max-width: 22ch; font-size: 12px; line-height: 1.45; }
  .photo-concept .instagram-section > .brand-socials { margin-top: 0; gap: 11px; }
  .photo-concept .instagram-section .social-button { min-height: 44px; padding: 12px 15px; font-size: 12px; }
  .photo-concept .instagram-section .social-note { margin-top: -12px; max-width: 42ch; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-concept .instagram-section .social-tile img,
  .photo-concept .instagram-section .social-button { transform: none !important; transition: none; }
}