zapupenec/diary_app

.container {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-auto-rows: 60px;
  gap: 0 120px;
  background-color: var(--background);
}

.search {
  display: flex;
  gap: 20px;
}

.search__selector {
  min-width: 100px;
}

.btn-clear {
  padding: 0;
  min-width: 60px;
}

.btn-clear svg,
.btn-add svg {
  height: 24px;
  width: 24px;
}

@media (max-width: 1439px) {
  .container {
    gap: 40px;
    grid-template-columns: min-content min-content;
    justify-content: space-between;
  }

  .search {
    order: 1;
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

@media (max-width: 1023px) {
  .container {
    padding: 20px;
    gap: 20px;
    grid-auto-rows: 40px;
  }

  .btn-clear {
    min-width: 40px;
  }

  .btn-clear svg,
  .btn-add svg {
    height: 20px;
    width: 20px;
  }

  .btn-add > span {
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
  }

  .search__selector {
    min-width: 70px;
  }
}