@media (min-width: 768px) and (max-width: 1023px){

  .bg {
    background-image: linear-gradient(
      to bottom,
      rgba(10, 13, 16, 0.3) 0%,
      rgba(10, 13, 16, 0.5) 21%,
      rgba(10, 13, 16, 1) 42%,
      var(--bg) 100%
    ),
    url('/images/Valko.png');
    background-position: center, 58% 14%;
    background-size: cover, 139% auto;
    background-attachment: fixed, fixed;
  }

.valko {
    height: 50vh;
}
  .valko-content {
    bottom: 10%;
    padding: 0 5vw;
  }
  .valko-title {
    font-size: clamp(28px, 9vw, 40px);
    max-width: 12ch;
  }
  .valko-desc {
    font-size: 13.5px;
    max-width: 100%;
  }
}
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0px 20px 0;
}

@media (max-width: 767px) {

  .bg {
    background-image: linear-gradient(
      to bottom,
      rgba(10, 13, 16, 0.3) 0%,
      rgba(10, 13, 16, 0.5) 21%,
      rgba(10, 13, 16, 1) 42%,
      var(--bg) 100%
    ),
    url('/images/Valko.png');
    background-position: center, 60% 8%;
    background-size: cover, 200% auto;
    background-attachment: fixed, fixed;
  }

.valko {
    height: 60vh;
}
  .valko-content {
    bottom: 10%;
    padding: 0 5vw;
  }
  .valko-title {
    font-size: clamp(28px, 9vw, 40px);
    max-width: 12ch;
  }
  .valko-desc {
    font-size: 13.5px;
    max-width: 100%;
  }

  main, .main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .total-card {
    padding: 22px 18px;
    margin: -5px 0 25px;
  }

  .platform-buttons {
    flex-wrap: wrap;
  }
  .platform-btn {
    min-width: 30%;
    padding: 10px 6px;
  }
  .platform-btn svg {
    width: 22px;
    height: 22px;
  }
  .platform-btn-count {
    font-size: 1rem;
  }

  .total-goal {
    font-size: 0.75rem;
    text-align: center;
    letter-spacing: 0;
}

  .campaign-numbers {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .campaign-goal-text {
    white-space: normal;
  }

  .nav-inner {
    padding: 10px 14px;
  }
  .brand span {
    display: none;
  }
  .nav-links {
    gap: 12px;
  }
  .nav-links a {
    font-size: 12px;
  }

  .site-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .site-card-header {
    height: 120px;
  }

  .site-card-news .site-card-header {
    height: 150px;
  }

  .site-card-summary {
    padding: 12px 14px 6px;
  }

  .site-card-meta {
    padding: 0 14px 12px;
  }

  .site-subnav {
    top: 46px;
  }
}

@media (max-width: 380px) {
  .platform-btn {
    min-width: 100%;
  }
}