.grid { display: grid; grid-column-gap: 4rem; grid-row-gap: 10rem; grid-template-columns: repeat(4, [col] 1fr [col]); grid-template-rows: fit-content, fit-content, auto; } .auto-grid { display: grid; grid-gap: var(--l-gap); grid-template-columns: repeat( auto-fit, minmax(var(--auto-grid-min-size), 1fr) ); } @media screen and (max-width: 880px) { .auto-grid { display: flex; flex-direction: column; } } .small-left-grid { display: grid; grid-gap: 1rem; @media (min-width: #{pxToRem(800)}) { grid-template-columns: 10rem 60ch; } } .block__dictionary { margin-left: auto; margin-right: auto; max-width: 50rem; padding: 0 1rem; } .block__word { display: flex; flex-direction: column; grid-column: span 2; margin: 1rem; } .block__type { align-items: flex-start; display: grid; grid-template-columns: 1fr 4fr; } .list { margin: 1rem 0; li { margin: 0.75rem 0; } a { word-break: break-word; } }