.site-footer {
  width: 100%;
  background: var(--chocolate, #3f2a22);
  color: var(--cream, #fdf8e8);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(20rem, 34vw, 32rem);
}

.site-footer__photo {
  margin: 0;
  min-height: 20rem;
  overflow: hidden;
  background: var(--chocolate-mid, #5a4036);
}

.site-footer__photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 50% 42%;
}

.site-footer__contact {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--chocolate, #3f2a22);
  text-align: center;
}

.site-footer__brand {
  display: block;
  width: clamp(6.5rem, 10vw, 8.5rem);
  height: auto;
  object-fit: contain;
}

.site-footer__contact h2 {
  margin: 0 0 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(253, 248, 232, 0.45);
  font: 600 1.05rem/1.3 var(--sans, "Outfit", system-ui, sans-serif);
}

.site-footer__contact address {
  font-style: normal;
  font-size: 1.05rem;
}

.site-footer__social {
  display: flex;
  gap: 0.8rem;
}

.site-footer__social a {
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1.5px solid rgba(253, 248, 232, 0.7);
  border-radius: 50%;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.site-footer__social a[hidden] {
  display: none;
}

.site-footer__social svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.site-footer__social a:first-child svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.site-footer__social .site-footer__icon-dot {
  fill: currentColor;
  stroke: none;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background: var(--cream, #fdf8e8);
  color: var(--chocolate, #3f2a22);
}

.site-footer__email {
  color: inherit;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 248, 232, 0.7);
  padding-bottom: 0.25rem;
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__photo {
    min-height: 16rem;
    height: 48vw;
    max-height: 24rem;
  }

  .site-footer__contact {
    padding: 2rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__social a {
    transition: none;
  }
}