/* Project grid layout - Defines the main grid structure for portfolio items */
.cl-projekty-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two-column grid layout */
    grid-gap: 2rem 2rem; /* Vertical and horizontal spacing between items */
    padding-bottom: 3rem;
    align-items: flex-end; /* Align items to bottom of their grid area */
  }
  .cl-projekty__wrapper {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 5%;
    margin-top: 2rem;
  }
  .projekt-item__wrapper {
    position: relative;
    box-sizing: border-box;
    height: fit-content;
    height: -moz-fit-content;
    display: grid;
    grid-gap: 0.5rem;
  }
  /* Medium sized projects - moderate padding */
  .projekt-item__wrapper.medium {
    padding: 35px 15%; /* Horizontal padding for medium-sized items */
  }
  /* Small sized projects - more padding and vertical offset */
  .projekt-item__wrapper.small {
    padding: 0 20%; /* More horizontal padding for small-sized items */
    align-self: flex-start;
    margin-top: 10rem; /* Vertical offset to create staggered effect */
  }
  .projekt-item__link-block {
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 0;
  }
  .projekt-item__name-wr {
    margin-top: 0.75rem;
    text-decoration: none;
  }
  .projekt-item__name {
    letter-spacing: -0.6px;
    font-size: 23px;
    line-height: 25px;
  }
  .projekt-item__name.h2-small {
    font-size: 22px;
  }
  .projekt-item__image {
    border-radius: 10px;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* Removed redundant nth-child rules as they're handled by JS */
  /* Responsive adjustments for large screens */
  @media screen and (max-width: 1440px) {
    .cl-projekty-list {
      grid-gap: 4rem 2rem; /* Slightly reduced spacing */
    }
    
    .projekt-item__wrapper.small {
      padding: 0 15%; /* Reduced padding */
      margin-top: 2rem; /* Reduced vertical offset */
    }
  }
  /* Responsive adjustments for medium screens */
  @media screen and (max-width: 1200px) {
    .cl-projekty-list {
      grid-gap: 3rem 2rem; /* Further reduced spacing */
    }
    
    .projekt-item__wrapper.medium {
      padding: 0 2%; /* Minimal padding */
    }
    
    .projekt-item__wrapper.small {
      padding: 0 10%; /* Reduced padding */
      margin-top: 1.5rem; /* Reduced vertical offset */
    }
  }
  /* Responsive adjustments for tablets */
  @media screen and (max-width: 991px) {
    .cl-projekty__wrapper {
      padding: 0 2%; /* Reduced container padding */
    }
    
    .cl-projekty-list {
      grid-template-columns: 1fr 1fr; /* Maintain two columns */
      grid-gap: 3rem 1.5rem; /* Further reduced spacing */
      width: 100%;
      max-width: 100%;
    }
    
    .projekt-item__wrapper.medium {
      padding: 0; /* No padding */
    }
    
    .projekt-item__wrapper.small {
      padding: 0 5%; /* Minimal padding */
      margin-top: 1rem; /* Minimal vertical offset */
    }
  }
  /* Responsive adjustments for mobile devices - switch to single column */
  @media screen and (max-width: 767px) {
    .cl-projekty__wrapper {
      padding: 0;
    }
    .cl-projekty-list {
      grid-template-columns: 1fr; /* Single column layout */
      grid-gap: 3rem;
      width: 100%;
      max-width: 100%;
    }
    /* Reset all special positioning and padding for mobile view */
    .projekt-item__wrapper.medium,
    .projekt-item__wrapper.small {
      padding: 0;
      margin-top: 0;
      align-self: center;
    }
  }
  /* Small mobile devices adjustments */
  @media screen and (max-width: 479px) {
    .cl-projekty-list {
      grid-gap: 2rem; /* Minimum spacing */
    }
    .projekt-item__name.h2-small {
      font-size: 18px; /* Smaller font size */
    }
  }