main {
  height: 98svh;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr) auto;
  padding: 15px;

  navbar {
    .uploader-data {
      display: flex;
      flex-direction: column;

      .main-name {
        font-size: 18px;
        font-weight: bold;
      }

      .alt-name {
        margin-top: -5px;
        color: gray;
        font-size: 12px;
      }
    }

    .items-right {
      margin-top: -10px;

      button {
        width: 35px;
        height: 35px;
      }
    }
  }

  main {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-content: flex-start;

    .album {
      width: 300px;
      height: 300px;
      background: var(--tui-background-base-alt);
      border: 2px solid var(--tui-border-normal);
      border-radius: 30px;
      overflow: hidden;
      position: relative;

      .album-name {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: color-mix(in srgb, var(--tui-background-base) 50%, transparent);
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;

        h2 {
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}