@import '../../components/heros/hero-left.css';
@import '../../components/cards/card-article.css';

#education-grid {
  margin: 50rem var(--margin);
  #education-grid-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #education-grid-hr {
    border: none;
    border-top: 1rem solid currentColor;
    margin: 30rem 0;
    opacity: 0.16;
  }
  #education-grid-filters {
    display: inline-flex;
    gap: 4rem;
    .education-filter {
      &:not(.active) {
        &::after {
          background: #222222;
        }
        span {
          color: var(--white);
        }
      }
    }
  }
  #education-grid-status {
    display: flex;
    align-items: center;
    margin-bottom: 40rem;
  }
  #education-grid-bottom {
    #education-grid-items {
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      transition: opacity 0.3s var(--curve);
      .card-article {
        width: 100%; /* Default: 1 column for mobile */
      }
      &.loading {
        opacity: 0;
        pointer-events: none;
        .continue-btn {
          opacity: 0.2;
          pointer-events: none;
        }
      }
    }
    .continue-btn {
      margin-left: auto;
      margin-right: auto;
      margin-top: 40rem;
    }
  }
  @media (max-width: 1024px) {
    #education-grid-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 24rem;
    }
  }
  @media (max-width: 768px) {
    #education-grid-top {
      #education-grid-title {
        font-size: 36px;
      }
      #education-grid-filters {
        width: 100vw;
        margin-left: calc(var(--margin) * -1);
        display: inline-flex;
        overflow-x: auto;
        padding: 0 var(--margin);
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
    #education-grid-status {
      margin-bottom: 20px;
    }
    #education-grid-bottom {
      #education-grid-items {
        /* Mobile styles are now the default */
      }
    }
  }
  @media (max-width: 580px) {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media (min-width: 769px) {
    #education-grid-bottom #education-grid-items .card-article {
      /* 3 columns for tablet and desktop */
      width: calc(var(--column) * 4 + var(--gap) * 3);
    }
  }
  @media (max-width: 769px) {
      #education-grid-bottom #education-grid-items .card-article {
      width: 100% !important;
      }
    
  }
}