@media (min-width: 992px) {
  .layout {
    display: grid;
    grid-template-areas: "sidebar main";
    grid-template-columns: 1fr 5fr;
    gap: 1.5rem; } }

@media (min-width: 992px) {
  .sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    display: block !important;
    height: calc(100vh - 6rem);
    padding-left: .25rem;
    margin-left: -.25rem;
    overflow-y: auto; } }

.sidebar {
  grid-area: sidebar; }
  .sidebar a {
    text-decoration: none;
    color: #FFF;
    border: none;
    background-color: transparent; }
    .sidebar a:hover, .sidebar a:active {
      color: #2CCC1F; }

.btn.browse {
  color: white;
  background: radial-gradient(at right top, #572EE0, #9913EB);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1; }
  .btn.browse:hover {
    background: radial-gradient(at right top, #4F2ACC, #8B11D6); }
  .btn.browse:active {
    background: radial-gradient(at right top, #4B47B8, #EF42D2); }

.offcanvas {
  background-color: #0e0f23; }

.main-content {
  grid-area: main; }