/*
 * ABOUT PAGE - MOBILE CONTROLS
 * These settings apply only to screens 767px wide or smaller.
 *
 * X: positive moves right; negative moves left.
 * Y: positive moves down; negative moves up.
 */

@media (max-width: 767px) {
  .hero-content {
    /* BerlinsChallenge logo position */
    --hero-logo-x: 0px;
    --hero-logo-y: -42px;

    /* ABOUT text position */
    --hero-about-x: 0px;
    --hero-about-y: -35px;
  }

  /* BerlinsChallenge logo size */
  .hero-title {
    width: min(255px, 70vw);
  }

  /* ABOUT text size */
  .hero-content h1 {
    font-size: 20px;
  }

  .collabs {
    /* Entire Sponsors heading and text position */
    --sponsor-text-x: 0px;
    --sponsor-text-y: 60px;

    /* Handshake logo position and size */
    --sponsor-logo-x: 0px;
    --sponsor-logo-y: 0px;
    --sponsor-logo-size: 82px;
  }

  .collabs-shell {
    translate: var(--sponsor-text-x) var(--sponsor-text-y);
  }

  .handshake {
    width: var(--sponsor-logo-size);
    translate: var(--sponsor-logo-x) var(--sponsor-logo-y);
  }
}