.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0; } @media (max-width: 1020px) { .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; } } @media (max-width: 720px) { .video-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 16px; } } @media(min-width: 1600px) { .video-grid { grid-template-columns: repeat(6, 1fr); } } @media(min-width: 2000px) { .video-grid { grid-template-columns: repeat(8, 1fr); } } .homepage { width: 100%; grid-area: main-content; } .divider { display: flex; } .divider:after { content: ""; flex: 1; } .line { align-items: center; margin: 1em 0; } .line:after { height: 1px; margin: 0 1em; } .one-line:before, .one-line:after { background-color: #171717; } ::-webkit-scrollbar { width: 10px; background: #111; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 100px; min-height: 24px; }