.jobs-grid {
      container-type: inline-size;
      container-name: jobs-grid;
    }

    .jobs-grid__header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto var(--space-5xl);
    }

    .jobs-grid__title {
      font-size: var(--text-3xl);
      font-weight: 400;
      color: var(--text-title);
      margin-top: var(--space-m);
      margin-bottom: var(--space-l);
    }

    .jobs-grid__intro {
      font-size: var(--text-ml);
      color: var(--text-body);
      line-height: 1.7;
    }

    .jobs-grid__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-xl);
    }

    .jobs-grid__card {
      display: flex;
      flex-direction: column;
      padding: var(--space-xl);
      background: var(--bg-surface);
      border: 1px solid var(--border-primary);
      border-radius: var(--radius-m);
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

    .jobs-grid__card:hover {
      border-color: var(--primary-50);
      box-shadow: var(--shadow-l);
      transform: translateY(-4px);
    }

    .jobs-grid__card--featured {
      border-color: var(--primary-30);
      background: linear-gradient(135deg, var(--bg-surface) 0%, var(--primary-5) 100%);
    }

    .jobs-grid__card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-m);
      margin-bottom: var(--space-l);
    }

    .jobs-grid__card-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.8rem;
      height: 4.8rem;
      background: var(--primary-10);
      border-radius: var(--radius-s);
    }

    .jobs-grid__card-icon .lucide {
      width: 2.4rem;
      height: 2.4rem;
      color: var(--primary);
    }

    .jobs-grid__card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      justify-content: flex-end;
    }

    .jobs-grid__badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3xs);
      padding: var(--space-3xs) var(--space-xs);
      font-size: var(--text-3xs);
      font-weight: 500;
      border-radius: var(--radius-xs);
      white-space: nowrap;
    }

    .jobs-grid__badge .lucide {
      width: 1.2rem;
      height: 1.2rem;
    }

    .jobs-grid__badge--location {
      background: var(--secondary-10);
      color: var(--secondary);
    }

    .jobs-grid__badge--type {
      background: var(--primary-10);
      color: var(--primary);
    }

    .jobs-grid__card-title {
      font-size: var(--text-xl);
      font-weight: 600;
      color: var(--text-title);
      margin: 0 0 var(--space-s);
    }

    .jobs-grid__card-description {
      font-size: var(--text-m);
      color: var(--text-body);
      line-height: 1.6;
      margin: 0 0 var(--space-l);
    }

    .jobs-grid__card-benefits {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-xl);
      flex: 1;
    }

    .jobs-grid__card-benefits li {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--text-s);
      color: var(--text-body);
      margin-bottom: var(--space-xs);
    }

    .jobs-grid__card-benefits li:last-child {
      margin-bottom: 0;
    }

    .jobs-grid__card-benefits .lucide {
      width: 1.6rem;
      height: 1.6rem;
      color: var(--success);
      flex-shrink: 0;
    }

    .jobs-grid__card-btn {
      margin-top: auto;
      justify-content: center;
    }

    .jobs-grid__footer {
      margin-top: var(--space-4xl);
      padding: var(--space-xl);
      background: var(--primary-5);
      border-radius: var(--radius-m);
      border: 1px solid var(--primary-20);
    }

    .jobs-grid__footer-content {
      display: flex;
      align-items: center;
      gap: var(--space-l);
    }

    .jobs-grid__footer-icon {
      width: 4rem;
      height: 4rem;
      color: var(--primary);
      flex-shrink: 0;
    }

    .jobs-grid__footer-title {
      font-size: var(--text-l);
      font-weight: 600;
      color: var(--text-title);
      margin: 0 0 var(--space-2xs);
    }

    .jobs-grid__footer-text {
      font-size: var(--text-m);
      color: var(--text-body);
      margin: 0;
    }

    .jobs-grid__footer-text a {
      color: var(--primary);
      font-weight: 500;
      text-decoration: none;
    }

    .jobs-grid__footer-text a:hover {
      text-decoration: underline;
    }

    /* Tablet Large */
    @container jobs-grid (max-width: 968px) {
      .jobs-grid__grid {
        gap: var(--space-l);
      }

      .jobs-grid__card {
        padding: var(--space-l);
      }
    }

    /* Tablet */
    @container jobs-grid (max-width: 768px) {
      .jobs-grid__header {
        margin-bottom: var(--space-4xl);
      }

      .jobs-grid__title {
        font-size: var(--text-2xl);
      }

      .jobs-grid__grid {
        grid-template-columns: 1fr;
        gap: var(--space-m);
      }

      .jobs-grid__footer-content {
        flex-direction: column;
        text-align: center;
      }
    }

    /* Mobile Large */
    @container jobs-grid (max-width: 640px) {
      .jobs-grid__intro {
        font-size: var(--text-m);
      }

      .jobs-grid__card-header {
        flex-direction: column;
        gap: var(--space-s);
      }

      .jobs-grid__card-badges {
        justify-content: flex-start;
      }
    }

    /* Mobile */
    @container jobs-grid (max-width: 480px) {
      .jobs-grid__card {
        padding: var(--space-m);
      }

      .jobs-grid__card-title {
        font-size: var(--text-l);
      }

      .jobs-grid__card-description {
        font-size: var(--text-s);
      }

      .jobs-grid__footer {
        padding: var(--space-l);
      }
    }