/* MEDIA QUERIES */
@media (max-width: 1200px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    width: 98%;
  }

  /* Combined: Full width columns */
  .box-1,
  .box-1-project,
  .box-9,
  .box-1-about,
  .box-2-about,
  .box-2-project,
  .project-header,
  .project-section,
  .box-3-project,
  .process-section,
  .solution-section,
  .solution-image {
    grid-column: 1 / 13;
  }

  /* Combined: Min heights */
  .box-1,
  .box-4-link,
  .box-9 {
    min-height: 250px;
  }

  .box-2,
  .box-6 {
    min-height: 350px;
  }

  .box-1 {
    grid-row: 1;
  }

  .box-4-link {
    grid-row: 2;
    grid-column: 5 / 13;
  }

  .box-3 {
    grid-row: 2;
    grid-column: 1 / 5;
  }

  .box-2 {
    grid-row: 3;
    grid-column: 1 / 7;
  }

  .box-6 {
    grid-row: 3;
    grid-column: 7 / 13;
  }

  .box-9 {
    grid-row: 5;
  }

  .box-9-holder {
    height: 0;
    min-height: 0;
    gap: 24px;
  }

  .box-7 {
    grid-row: 6;
    min-height: 90px;
    grid-column: 6 / 9;
  }

  .box-5 {
    grid-row: 6;
    min-height: 200px;
    grid-column: 1 / 6;
  }

  /* Combined: Gap adjustments */
  .box-5-text-holder,
  .box-1-text-holder {
    gap: 24px;
  }

  .box-8 {
    grid-row: 6;
    min-height: 140px;
    grid-column: 9 / 13;
  }

  .box-1-title {
    font-size: 46px;
  }

  .box-1-text {
    font-size: 28px;
  }

  .stack-icons {
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
  }

  .socials-holder {
    width: 100%;
    height: 110px;
  }

  .box-1-about {
    grid-row: 2;
  }

  .box-2-about {
    grid-row: 3;
  }

  .box-2-about-text {
    font-size: 18px;
  }

  .box-3-about {
    grid-row: 4;
    grid-column: 1 / 8;
  }

  .about-page-stack-icon {
    grid-template-columns: repeat(6, 1fr);
  }

  .box-4-about {
    grid-column: 8 / 13;
  }

  .box-1-project {
    grid-row: 2;
  }
}

@media screen and (max-width: 1000px) {
  .box-1-title {
    font-size: 42px;
  }

  .box-1-text {
    font-size: 24px;
  }

  .box-4-text {
    font-size: 24px;
  }

  /* Combined: 18px text */
  .box-1-about-text,
  .slide-text,
  .project-section p,
  .challenge-list,
  .box-2-project-overview p,
  .box-1-project-info p,
  .process-section p,
  .solution-item p {
    font-size: 18px;
  }

  /* Combined: 24px headings */
  .project-section h2,
  .process-section h2,
  .solution-section h2 {
    font-size: 24px;
  }

  /* Combined: 20px subheadings */
  .slide-title,
  .process-step h4,
  .solution-item h4 {
    font-size: 20px;
  }

  .project-box-btn {
    font-size: 16px;
    max-width: 180px;
  }
}

@media screen and (max-width: 800px) {
  /* Combined: Full width */
  .box-2,
  .box-4-link,
  .box-6 {
    grid-column: 1 / 13;
  }

  .box-2 {
    grid-row: 3;
  }

  .box-3 {
    display: none;
  }

  .box-5 {
    grid-column: 1 / 9;
  }

  .box-6 {
    grid-row: 4;
  }

  .box-7 {
    grid-column: 9 / 13;
  }

  .box-8 {
    grid-row: 7;
    grid-column: 1 / 13;
    min-height: 0;
  }

  .box-8-soacila-medias {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-page-stack-icon {
    grid-template-columns: repeat(5, 1fr);
  }

  .project-title-holder {
    align-items: center;
    text-align: center;
  }
}

@media screen and (max-width: 650px) {
  .stack-icons {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Combined: Full width rows */
  .box-5,
  .box-7,
  .box-3-about,
  .box-4-about {
    grid-column: 1 / 13;
  }

  .box-7 {
    grid-row: 7;
  }

  .box-8 {
    grid-row: 8;
  }

  .socials-holder {
    height: 80px;
  }

  .box-8-soacila-medias {
    gap: 8px;
  }

  .box-1-title {
    font-size: 32px;
  }

  /* Combined: 20px text */
  .box-1-text,
  .box-4-text {
    font-size: 20px;
  }

  /* Combined: Padding and height reset */
  .box-1,
  .box-2,
  .box-4,
  .box-6,
  .box-9 {
    padding: 20px;
    min-height: 0;
    height: 235px;
  }

  .box-3-about {
    grid-row: 4;
  }

  .box-4-about {
    grid-row: 5;
  }

  .about-page-stack-icon {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (max-width: 500px) {
  /* Combined: 4 column grids */
  .stack-icons,
  .about-page-stack-icon {
    grid-template-columns: repeat(4, 1fr);
  }
}