/* ============================================
   Home Page Styles
   ============================================ */

.home {
  gap: var(--space-5);
}

.home__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home__selected-work {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home__work-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-areas:
    "pulse pulse pulse pulse pulse pulse myko myko myko myko";
  gap: var(--space-2);
}

.home__work-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.home__work-grid .work-card--pulse {
  grid-area: pulse;
}

.home__work-grid .work-card--mykorrizha {
  grid-area: myko;
}


@media (max-width: 1024px) {
  .home__work-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "pulse myko";
    gap: var(--space-2);
  }
  .home__work-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .home__work-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pulse"
      "myko";
    gap: var(--space-2);
  }
  .home__work-grid-3 {
    grid-template-columns: 1fr;
  }
}