/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .timeline {
    padding-left: 20px;
  }

  .timeline::before {
    left: 4px;
  }

  .experience-item::before {
    left: -18px;
  }

  .experience-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .experience-date {
    align-self: flex-start;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .project-item {
    padding: 15px;
  }

  .project-item img {
    height: 200px;
  }

  .profile-container {
    flex-direction: column;
    align-items: center;
  }

  #vinyl-gallery {
    height: 200px;
    gap: 10px;
  }

  .vinyl {
    margin-right: 15px;
  }

  .vinyl:hover {
    margin-right: 18px;
  }

  .vinyl img {
    width: 150px;
    height: 150px;
  }

  .vinyl:hover img {
    width: 158px;
    height: 158px;
  }

  .floating-img {
    display: none;
  }

  .window {
    margin: 10px;
  }
}