/* Case Study Desktop Layout Variant
   For categories: Website Design, Dashboard
   - 2 columns instead of 3
   - No rotation (but keep scroll animation)
   - Larger images for desktop screenshots
*/

/* Desktop layout modifier - 2 columns, no rotation */
.case-hero-images-grid.is-desktop-layout {
  grid-template-columns: 33rem 33rem; /* 2 wider columns */
  width: 70rem;
  gap: 1.5rem;
}

/* Remove rotation only - keep animation */
.case-hero-images-grid.is-desktop-layout .case-hero-image-col {
  rotate: 0deg !important;
}

.case-hero-images-grid.is-desktop-layout .case-hero-image-col.is-3 {
  display: none; /* Hide the 3rd column */
}

/* Keep scroll animation, just adjust gap */
.case-hero-images-grid.is-desktop-layout .case-hero-image-list.is-1,
.case-hero-images-grid.is-desktop-layout .case-hero-image-list.is-2 {
  gap: 1.5rem;
}

/* Adjust image box for desktop screenshots */
.case-hero-images-grid.is-desktop-layout .case-hero-image-box {
  height: auto;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.case-hero-images-grid.is-desktop-layout .case-hero-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Responsive adjustments */
@media only screen and (max-width: 1440px) {
  .case-hero-images-grid.is-desktop-layout {
    grid-template-columns: 20rem 20rem;
    width: 44rem;
  }
}

@media only screen and (max-width: 1199px) {
  .case-hero-images-grid.is-desktop-layout {
    grid-template-columns: 18rem 18rem;
    width: 40rem;
  }
}

@media only screen and (max-width: 768px) {
  .case-hero-images-grid.is-desktop-layout {
    grid-template-columns: 14rem 14rem;
    width: 30rem;
  }
}