.atendimento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 54px;
}
.atendimento-conteudo h2 {
  margin-bottom: 20px;
  font-size: 2rem;
}
.atendimento-conteudo > p {
  margin-bottom: 16px;
  color: var(--cor-texto-secundario);
}
.contato-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
  padding: 24px;
  border-radius: var(--raio);
  background: var(--cor-primaria-clara);
}
.contato-box > a:not(.btn) {
  color: var(--cor-primaria);
  font-size: 1.35rem;
  font-weight: 700;
}
.galeria-placeholders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
  isolation: isolate;
}
.galeria-placeholders .imagem-placeholder {
  min-height: 210px;
  position: relative;
  z-index: 0;
  overflow: visible;
  transition: z-index 0s 0.35s;
}
@media (max-width: 820px) {
  .atendimento-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .galeria-placeholders {
    grid-template-columns: 1fr;
  }
}
.borda-img {
  display: block;
  width: 100%;
  height: auto;
  border: 7px solid white;
  box-shadow: 0 0 0 2px var(--cor-primaria);
  border-radius: 40px;
  transform-origin: left center;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.42s ease;
  will-change: transform;
}

.galeria-placeholders .imagem-placeholder:nth-child(even) .borda-img {
  transform-origin: right center;
}

/*
 * As fotos da esquerda crescem para a direita e as da direita para a esquerda.
 * Assim, o zoom permanece na área da galeria e não invade a coluna de texto.
 */
@media (hover: hover) and (pointer: fine) {
  .galeria-placeholders .imagem-placeholder:hover {
    z-index: 10;
    transition-delay: 0s;
  }

  .galeria-placeholders .imagem-placeholder:hover .borda-img {
    transform: scale(1.3);
    box-shadow:
      0 0 0 2px var(--cor-primaria),
      0 22px 45px rgba(10, 45, 76, 0.28);
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1100px) {
  .galeria-placeholders .imagem-placeholder:hover .borda-img {
    transform: scale(1.18);
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 500px) {
  .galeria-placeholders .imagem-placeholder:hover .borda-img {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .borda-img {
    transition: none;
  }
}