* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #070b22; }

body { display: grid; place-items: start center; }

.poster { width: min(100%, 540px); line-height: 0; background: #070b22; }

.contact-section > img { display: block; width: 100%; height: auto; }

.contact-section { position: relative; line-height: 0; }

/* Invisible click zones aligned with the two buttons in the poster. */
.contact { position: absolute; top: 93.1%; height: 3.1%; border-radius: 999px; outline-offset: 3px; }
.telegram { left: 12.5%; width: 37.5%; }
.whatsapp { right: 12.5%; width: 37.5%; }

.contact:focus-visible { outline: 3px solid #fff; }

@media (min-width: 541px) {
  body { padding: 24px 0; }
  .poster { box-shadow: 0 10px 40px rgb(0 0 0 / 45%); }
}