/*
 * ABOUT PAGE - LAPTOP CONTROLS
 * Applies from 768px through 1366px viewport width.
 *
 * X: positive moves right; negative moves left.
 * Y: positive moves down; negative moves up.
 */

@media (min-width: 768px) and (max-width: 1366px) {
  .collabs {
    /* Move the complete Sponsors section in the page layout */
    --laptop-section-y: 0px;

    /* Blue background position and size */
    --laptop-bg-x: 0px;
    --laptop-bg-y: 0px;
    --laptop-bg-width: 100%;
    --laptop-bg-height: 100%;

    /* Sponsors heading and paragraph position */
    --laptop-sponsor-text-x: 0px;
    --laptop-sponsor-text-y: -20px;

    /* Handshake position and size */
    --laptop-sponsor-logo-x: 0px;
    --laptop-sponsor-logo-y: 0px;
    --laptop-sponsor-logo-size: 150px;

    margin-top: var(--laptop-section-y);
  }

  .collabs-blue {
    width: var(--laptop-bg-width);
    height: var(--laptop-bg-height);
    translate: var(--laptop-bg-x) var(--laptop-bg-y);
  }

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

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