.app{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}

.app__main{
  flex:1;
  padding: var(--s-6) 0;
}

.page{
  display:grid;
  gap: var(--s-5);
}

.page__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--s-5);
}

.page__title{
  display:flex;
  flex-direction:column;
  gap: var(--s-1);
}

.page__title h1{ margin:0; }

@media (max-width: 768px){
  .app__main{ padding: var(--s-4) 0; }

  .page{ gap: var(--s-3); }

  .page__header{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s-3);
  }
}