.job-openings-slider {
  .swiper {
    width: 100%;

    .swiper-wrapper {
      .swiper-slide {
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--colors-border-weak);
        box-sizing: border-box;
        height: auto;

        a {
          all: unset;
          box-sizing: border-box;
          cursor: pointer;
          display: block;
          padding: var(--spacing-4);

          .badge {
            background-color: var(--colors-expressive-blue-200);
            color: var(--colors-expressive-blue-800);
            margin-block: 0 var(--spacing-2);
          }

          h4 {
            color: var(--colors-neutral-1000);
            font-size: var(--font-sizes-2);
            margin-block: 0 var(--spacing-2);
          }

          .employer-name {
            margin-block: 0 var(--spacing-2);

            .icon {
              display: none;
              margin-inline-start: 0;
              vertical-align: middle;
            }
          }

          .location {
            margin-block: 0 var(--spacing-4);
          }

          .compensation {
            color: var(--colors-neutral-1000);
            font-size: var(--font-sizes-2);
            font-weight: var(--font-weights-bold);
            margin-block: 0 var(--spacing-4);
          }

          .link-mark {
            .icon {
              color: var(--colors-foreground-primary);
              height: 1.125rem;
              margin-inline-start: 0;
              vertical-align: middle;
              width: 1.125rem;
            }
          }
        }
      }
    }
  }

  .pagination {
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-content: space-between;
    margin-block: var(--spacing-6);

    .pagination-bullets {
      display: flex;
      justify-content: center;

      .swiper-pagination-bullet {
        background-color: var(--colors-neutral-300);
        height: var(--spacing-3);
        transition: background-color 0.3s ease-in-out;
        width: var(--spacing-3);
      }

      .swiper-pagination-bullet-active {
        background-color: var(--colors-neutral-1000);
      }
    }

    .navigation {
      align-items: center;
      background: none;
      border-radius: 0;
      border: none;
      color: var(--colors-neutral-1000);
      display: flex;
      font-weight: var(--font-weights-bold);
      gap: var(--spacing-2);
      padding: 0;
      transition: color 0.3s ease-in-out;

      .icon {
        svg {
          transition: fill 0.3s ease-in-out;
        }
      }
    }

    .pagination-prev {
      margin-inline-start: var(--spacing-4);
    }

    .pagination-next {
      margin-inline-end: var(--spacing-4);
    }

    .swiper-button-disabled {
      color: var(--colors-neutral-300);

      .icon {
        svg {
          fill: var(--colors-neutral-300);
        }
      }
    }
  }
}