img[src$="landing-portrait.jpeg"] {
  animation: hero-portrait-enter 1.4s cubic-bezier(0.22, 0.68, 0, 1) both;
  transform-origin: 76% 50%;
  will-change: filter, opacity, transform;
}

@keyframes hero-portrait-enter {
  from {
    filter: saturate(0.82);
    opacity: 0;
    transform: scale(1.055);
  }

  to {
    filter: saturate(1);
    opacity: 1;
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  img[src$="landing-portrait.jpeg"] {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }
}

footer img[src^="/assets/bishop-charles-jonasi-ministry-logo.jpeg"] {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center;
}

footer > div:last-child > .container-wide::after {
  content: "Designed by SIMZTECH";
  margin-left: auto;
  font-size: 11px;
  color: #aab6c4;
}

@media (max-width: 639px) {
  section:has(> div > img[src$="landing-portrait.jpeg"]) > div:first-child {
    inset: 0 0 auto;
    height: clamp(220px, 29svh, 260px);
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > div:first-child img {
    object-fit: cover;
    object-position: 72% top;
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > div:nth-child(2) {
    background: linear-gradient(to bottom, rgba(24, 35, 51, 0) 0%, rgba(24, 35, 51, .08) 35%, rgba(24, 35, 51, 1) 100%) !important;
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > .container-wide {
    min-height: 0;
    align-items: flex-start;
    padding-top: calc(clamp(220px, 29svh, 260px) + 1rem);
    padding-bottom: 2rem;
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > .container-wide h1 {
    margin-top: 1.25rem;
    font-size: 40px;
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > .container-wide p {
    margin-top: 1rem;
    font-size: 16px;
    line-height: 1.55;
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > .container-wide .mt-9 {
    margin-top: 1.25rem;
  }

  section:has(> div > img[src$="landing-portrait.jpeg"]) > .container-wide a.btn-gold,
  section:has(> div > img[src$="landing-portrait.jpeg"]) > .container-wide a.btn-ghost {
    padding: .7rem .85rem;
    font-size: 14px;
  }
}