.greeting {
  font-size: 2rem;
}

.image-wrap {
  width: min(100%, 38rem);
  height: min(100vw, 38rem);
  overflow: hidden;
  position: relative;
  background: black;
  border-radius: 10px;
  margin: 0 auto;
  max-width: 100%;
}

.image-wrap img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.1);

  animation: kenburns 30s linear infinite;
  will-change: transform, opacity;
}

.image-wrap img:nth-child(1) { animation-delay: 0s; }
.image-wrap img:nth-child(2) { animation-delay: 5s; }
.image-wrap img:nth-child(3) { animation-delay: 10s; }
.image-wrap img:nth-child(4) { animation-delay: 15s; }
.image-wrap img:nth-child(5) { animation-delay: 20s; }
.image-wrap img:nth-child(6) { animation-delay: 25s; }

@keyframes kenburns {
  0%   { opacity: 0; transform: scale(1.1); }
  4%   { opacity: 1; }          /* fade in quickly */
  28%  { opacity: 1; }          /* hold visible */
  33%  { opacity: 0; }          /* fade out */
  99%  { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.1); } /* snap back for next loop */
}

@media (max-width: 800px) {
  .greeting {
    font-size: 1.5rem;
  }

  .image-wrap {
    width: 100%;
    height: min(100vw, 30rem);
  }
}

.mobile-only {
  display: none
  text-align: center;
}
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: underline;
  }

  .mobile-only:hover {
    color: #C4471F;
  }
}

a.mobile-only:link {
  text-decoration: underline;
}

a.mobile-only:hover {
  color: #C4471F !important;
}

a.mobile-only:active {
  text-decoration: underline;
}

.modal {
  display: none;
}