:root {
  --experience-card-gap: clamp(40px, 3.333vw, 64px);
  --experience-card-padding: clamp(16px, calc(3.75vw - 32px), 40px);
  --experience-card-radius: clamp(32px, 2.5vw, 48px);
  --experience-column-gap: clamp(24px, calc(6.25vw - 56px), 64px);
  --experience-meta-width: clamp(220px, calc(15.625vw + 20px), 320px);
  --experience-title-size: clamp(20px, calc(0.625vw + 12px), 24px);
  --experience-title-line: clamp(24px, calc(0.78125vw + 14px), 29px);
  --experience-text-size: clamp(14px, calc(0.3125vw + 10px), 16px);
  --experience-text-line: clamp(20px, calc(0.46875vw + 14px), 23px);
}

.experience-content {
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  flex: 1 1 auto;
  padding-block: var(--page-padding);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.experience-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.experience-list {
  width: min(100%, 1000px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--experience-card-gap);
}

.experience-card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--experience-column-gap);
}

.experience-company {
  width: var(--experience-meta-width);
  flex: 0 0 var(--experience-meta-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: var(--experience-card-padding);
}

.experience-company-info,
.experience-position-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.experience-card h2,
.experience-card h3,
.experience-card p {
  margin: 0;
}

.experience-card h2,
.experience-card h3 {
  font-size: var(--experience-title-size);
  font-weight: 500;
  line-height: var(--experience-title-line);
}

.experience-company-description,
.experience-date {
  color: var(--muted);
}

.experience-company-description {
  max-width: 389px;
}

.experience-company-description,
.experience-location,
.experience-date,
.experience-body {
  font-size: var(--experience-text-size);
  font-weight: 300;
  line-height: var(--experience-text-line);
}

.experience-position {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: var(--experience-card-padding);
  border-radius: var(--experience-card-radius);
  background: var(--card);
}

.experience-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--experience-text-line);
}

@media (min-width: 901px) and (max-width: 1279px) {
  :root {
    --experience-card-padding: 16px;
    --experience-card-radius: 32px;
    --experience-column-gap: 24px;
    --experience-meta-width: 160px;
    --experience-title-size: 20px;
    --experience-title-line: 24px;
    --experience-text-size: 14px;
    --experience-text-line: 20px;
  }

  .experience-content {
    padding-block: 64px;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  :root {
    --experience-card-padding: 24px;
    --experience-card-radius: 48px;
    --experience-column-gap: 24px;
    --experience-meta-width: auto;
    --experience-title-size: 16px;
    --experience-title-line: 20px;
    --experience-text-size: 14px;
    --experience-text-line: 20px;
  }

  .experience-content {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0 48px 48px;
  }

  .experience-card {
    flex-direction: column;
    gap: var(--experience-column-gap);
    padding: 32px;
    border-radius: var(--experience-card-radius);
    background: var(--card);
  }

  .experience-company {
    width: 100%;
    flex-basis: auto;
    padding-block: 0;
  }

  .experience-position {
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
}

@media (max-width: 767px) {
  :root {
    --experience-card-gap: 40px;
    --experience-card-padding: 16px;
    --experience-card-radius: 32px;
    --experience-column-gap: 24px;
    --experience-meta-width: auto;
    --experience-title-size: 16px;
    --experience-title-line: 20px;
    --experience-text-size: 14px;
    --experience-text-line: 20px;
  }

  .experience-content {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0 24px 32px;
  }

  .experience-card {
    flex-direction: column;
    gap: var(--experience-column-gap);
    padding: var(--experience-card-padding);
    border-radius: var(--experience-card-radius);
    background: var(--card);
  }

  .experience-company {
    width: 100%;
    flex-basis: auto;
    padding-block: 0;
  }

  .experience-position {
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
}