/* ===============================
   SECTION
================================ */

.section{
  padding: 60px 0;
}

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
}

/* ===============================
   SECTION
================================ */

.section{
  padding: 60px 0;
}

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
}

/* ===============================
   HERO
================================ */

.hero{
  padding: 40px 0;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:center;
}

/* ===============================
   GRIDS
================================ */

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
}

.cards-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:32px;
}

.benefits{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:24px;
}

.graduates{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:32px;
}

.cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width:980px){

  .hero__grid,
  .grid-2,
  .cards-3,
  .graduates,
  .cta{
    grid-template-columns:1fr;
  }

  .benefits{
    grid-template-columns:1fr 1fr;
  }

  .section__head{
    flex-direction:column;
    align-items:flex-start;
  }

}

/* ===============================
   GRIDS
================================ */

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
}

.cards-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:32px;
}

.benefits{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:24px;
}

.graduates{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:32px;
}

.cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
}