/* Feature Section - FINAL Grid Override with Maximum Specificity */
/* This file MUST be loaded LAST to override all other grid settings */

/* Force grid proportions: left -10%, middle -20%, right gets more space */
body .features-section .feature-item,
body .interactive-features .feature-item,
.features-section .feature-item,
.interactive-features .feature-item,
.feature-item {
  /* Default - Left smaller, middle much smaller, title much bigger */
  grid-template-columns: 1.15fr 1.45fr 2.1fr !important;
}

/* Medium screens */
@media screen and (min-width: 1024px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.2fr 1.5fr 2.2fr !important;
  }
}

/* Large screens */
@media screen and (min-width: 1280px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.25fr 1.55fr 2.3fr !important;
  }
}

/* XL screens */
@media screen and (min-width: 1440px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.3fr 1.6fr 2.4fr !important;
  }
}

/* XXL screens */
@media screen and (min-width: 1920px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.35fr 1.65fr 2.5fr !important;
  }
}

/* Tablet screens */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.1fr 1.4fr 2fr !important;
  }
}

/* Ensure this overrides ALL other grid settings */
@media screen and (min-width: 768px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.15fr 1.45fr 2.1fr !important;
  }
}

@media screen and (min-width: 1024px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.2fr 1.5fr 2.2fr !important;
  }
}

@media screen and (min-width: 1280px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.25fr 1.55fr 2.3fr !important;
  }
}

@media screen and (min-width: 1440px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.3fr 1.6fr 2.4fr !important;
  }
}

@media screen and (min-width: 1920px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.35fr 1.65fr 2.5fr !important;
  }
}

/* Visual verification - you can see the change clearly */
/* Left text column is now ~10% smaller than before */
/* Video column is now ~20% smaller than before */
/* Title column is now much bigger, getting the extra space */