html,
body {
  overflow-x: hidden;
  background: #000;
}

body {
  min-height: 100svh;
  font-family: Arial, sans-serif;
  color: var(--color-white);
}

.page-shell {
  width: 100%;
  min-height: 100svh;
}

.master-links {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: var(--page-padding-y) var(--page-padding-x);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-image: url("../assets/bg/bg-desktop.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.master-links__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.master-links__spacer-top {
  height: 1px;
  flex-shrink: 0;
}

.master-links__platforms {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--platform-gap-y) var(--platform-gap-x);
  padding-bottom: 15vh;
}

.platform-link {
  width: var(--platform-width);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.platform-link:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.platform-link img {
  width: 100%;
  height: auto;
}

.master-links__badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: var(--z-social);
  width: var(--badge-size);
}

.master-links__badge img {
  width: 100%;
  height: auto;
}

.master-links__social {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-social);
  display: flex;
  align-items: center;
  gap: 18px;
}

.master-links__social a {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.master-links__social a:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.master-links__social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 991px) {
  :root {
    --platform-width: 220px;
    --platform-gap-x: 18px;
    --platform-gap-y: 18px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --page-padding-x: 7vw;
    --page-padding-y: 20px;
    --social-icon-size: 22px;
    --badge-size: 70px;
  }

  .master-links {
    align-items: flex-end;
    background-image: url("../assets/bg/bg-mobile.webp");
    background-position: top center;
  }

  .master-links__content {
    max-width: 100%;
  }

  .master-links__platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5vw;
    padding-bottom: 15vh;
  }

 .master-links__platforms .platform-link:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 5vw) / 2);
}

  .platform-link {
    width: 100%;
  }

  .master-links__badge {
    left: 16px;
    bottom: 16px;
  }

  .master-links__social {
    right: 16px;
    bottom: 16px;
    gap: 14px;
  }
}