header { width: 100%; display: flex; justify-content: space-between; padding: 8px; font-size: 32px; } header > * { flex-shrink: 0; } header .title { margin: 0; margin-right: 32px; font-size: 32px; font-weight: normal; } .path-slash { margin: 0 4px; } .parent { /* color: rgb(147, 149, 161); */ } .search { position: relative; display: inline-block; height: 32px; margin-left: auto; overflow: hidden; flex: 0 0 32px; transition: flex 0.3s ease-in; } .search:hover { transition: flex 0.6s ease-out; flex: 1 0 auto; } .search svg { width: 32px; height: 32px; padding: 4px; margin: 0; } .search input { border: none; width: 100%; height: 100%; position: absolute; top: 0; left: 32px; outline: none; border-bottom: 1px solid currentColor; font-size: 32px; padding: 0; padding-left: 4px; background: none; } main { padding: 0 8px; } .list { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .card { /* transform: skew(14deg); */ aspect-ratio: 1; border: 1px solid currentColor; padding: 32px; font-stretch: 50%; display: flex; justify-content: center; align-items: center; font-size: 32px; text-align: center; } .card:hover { background-color: grey; } .card > * { /* transform: skew(-28deg); */ } .card svg { width: 32px; height: 32px; } @media (max-width: 767px) { header { display: block; font-size: 28px; } header .title { display: inline; font-size: 28px; } .search { margin-top: 16px; display: block; } .search input { font-size: 28px; } }