@font-face {
  font-family: Nunito;
  src: url('/media/nunito-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

.v3-art {
  display: block;
  aspect-ratio: 1;
  background: url('/media/dong-ho-icons.webp') no-repeat;
  background-size: 400% 300%;
}

.v3-art--calendar   { background-position: 0 0; }
.v3-art--key        { background-position: 33.333% 0; }
.v3-art--checklist  { background-position: 66.667% 0; }
.v3-art--listings   { background-position: 100% 0; }
.v3-art--viewing    { background-position: 0 50%; }
.v3-art--camera     { background-position: 33.333% 50%; }
.v3-art--calculator { background-position: 66.667% 50%; }
.v3-art--chat       { background-position: 100% 50%; }
.v3-art--transfer   { background-position: 0 100%; }
.v3-art--sailboat   { background-position: 33.333% 100%; }
.v3-art--briefcase  { background-position: 66.667% 100%; clip-path: inset(0 4%); }
.v3-art--city       { background-position: 100% 100%; }

.v3-request, .v3-questions { position: relative; isolation: isolate; }

.v3-questions::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 33%;
  height: 185px;
  border-radius: 0 0 0 34px;
  background: url('/media/dong-ho-waves.webp') left bottom / 620px auto no-repeat;
  mask-image: linear-gradient(to right, #000 54%, transparent);
  opacity: .85;
  pointer-events: none;
  content: '';
}

@media (max-width: 800px) {
  .v3-questions::before {
    top: 0;
    bottom: auto;
    width: 100px;
    height: 67px;
    border-radius: 26px 0 0 0;
    background-position: left bottom;
    background-size: 290px auto;
    opacity: .25;
  }
}

.home-v3 .site-footer::after {
  display: block;
  height: clamp(30px, 4vw, 57px);
  margin-top: 8px;
  background: url('/media/dong-ho-waves.webp') center bottom / max(670px, 100%) auto repeat-x;
  content: '';
}