.jobs {
      margin-block: 24px;

      .jobs-list {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 16px;
          margin-bottom: 16px;

          @media (width > 768px) {
              flex-direction: row;
              flex-wrap: wrap;
              gap: 32px;
          }
      }

      @media (width > 768px) {
          margin-block: 48px;
      }

      .job {
          border: 1px solid #E2E2E2;
          border-radius: 16px;
          overflow: hidden;
          flex: 0 0 calc(33.333% - 21.333px);
          transition: all 0.2s ease;

          &:hover {
              background-color: #0070BB;
              transform: scale(1.05);

              h4 {
                  color: #fff;
              }
          }

          &:focus-within {
              outline: 2px solid #000;
              outline-offset: 2px;
          }

          a {
              text-decoration: none;

              &:focus {
                  outline: none;
              }
          }

          .photo {
              margin-bottom: 0;

              img {
                  display: block;
                  width: 100%;
                  height: 230px;
                  object-fit: cover;
              }
          }

          h4 {
              margin: 0;
              font-size: 1.8rem;
              text-align: center;
              padding: 16px 24px;
              justify-content: center;
              color: var(--_bg-color);
              transition: color 0.2s ease;

              @media (width > 768px) {
                  font-size: 2rem;
              }

              &:before {
                  display: none;
              }
          }
      }

      .action {
          justify-content: center;
          text-align: center;
      }
  }