@media (max-width: 700px) {
  .logo {
    top: 16px;
    left: 16px;
    font-size: clamp(16px, 5.5vw, 22px);
  }

  .logo-role {
    font-size: 8px;
    margin-top: 4px;
  }

  .cv-buildup-group {
    display: none;
  }

  .cta-bar {
    top: 16px;
    right: 16px;
    gap: 10px;
  }

  .cta-btn {
    font-size: 9px;
  }

  .cta-divider {
    display: none;
  }

  .sound-toggle {
    width: 20px;
    height: 20px;
  }

  .sound-icon {
    width: 17px;
    height: 17px;
  }

  .linkedin-btn {
    width: 13px;
    height: 13px;
  }

  .frieze-item {
    width: 88vw;
    margin-left: -44vw;
    height: 44vw;
    bottom: 215px;
  }

  .cv-card-content {
    left: 20px;
    bottom: 20px;
    max-width: calc(100% - 40px);
  }

  .cv-title {
    font-size: clamp(20px, 6.4vw, 27px);
  }

  .cv-title--long {
    font-size: clamp(14px, 4.2vw, 17px);
  }

  .cv-subtitle {
    font-size: clamp(11px, 3.3vw, 14px);
    margin-bottom: 8px;
  }

  .cv-card-cta {
    font-size: 10px;
  }

  .timeline {
    bottom: 64px;
    left: 16px;
    right: 16px;
  }

  .timeline-mask {
    height: 74px;
  }

  .timeline-year-label {
    font-size: 11px;
  }

  .toolbar-toggle-group {
    bottom: 14px;
    gap: 6px;
  }

  .list-toggle-btn {
    padding: 7px 14px;
    font-size: 10px;
  }
}