.container {
  &.theme {
    .wrapper {
      display: flex;
      width: 100%;
      padding: 1.875rem 1.875rem 2.25rem;
      gap: 1.5rem;
      border-radius: 1.125rem;
      background-color: var(--background-color-secondary);

      .instructions {
        display: flex;
        flex-direction: column;
        width: 72%;
        gap: 1.5rem;

        .screenshot {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-height: 54vh;
          padding: 1.5rem;
          overflow: hidden;
          border-radius: 0.75rem;
          background-color: var(--background-color-primary);

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            border-radius: 0.375rem;
          }
        }
      }

      .sidebar {
        display: flex;
        position: sticky;
        top: 8em;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        flex-direction: column;
        height: fit-content;
        max-height: 100%;
        padding: 1.5rem;
        gap: 1em;
        border-radius: 0.75rem;
        background-color: var(--background-color-primary);

        h4 {
          position: relative;
          font-size: 0.875rem;

          .count {
            display: flex;
            position: absolute;
            top: 50%;
            right: 0;
            align-items: center;
            justify-content: center;
            width: 1.25rem;
            height: 1.25rem;
            transform: translateY(-50%);
            border-radius: 100%;
            background-color: var(--background-color-tertiary);
            font-weight: 700;
            font-size: 0.625rem;
            line-height: 1;
          }
        }

        ul {
          display: flex;
          flex-direction: column;
          margin: 0;
          padding: 0;
          gap: 0.5rem;
          line-height: 1.8;
          list-style: none;

          &:not(.contributors) {
            margin-bottom: 0.75rem;
          }

          &.contributors {
            max-height: 60vh;
            overflow-y: auto;
            gap: 0.25rem;
          }

          a {
            &:not(.contributor) {
              display: flex;
              align-items: center;
              width: 100%;
              gap: 0.75rem;
              transition: color 240ms var(--ease-fluid);

              &:focus-visible,
              &:hover {
                color: var(--color);
              }
            }
          }

          .contributor {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0.5rem;
            gap: 0.75rem;
            border-radius: 1rem;
            transition:
              background-color 240ms var(--ease-sharp),
              color 240ms var(--ease-fluid);

            &:focus-visible,
            &:hover {
              background-color: var(--background-color-secondary);
              color: var(--color);
            }

            div {
              position: relative;
              width: 1.5rem;
              height: 1.5rem;
              overflow: hidden;
              border-radius: 100%;
              background-color: var(--background-color-primary);

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
          }
        }
      }
    }

    @media (max-width: 60rem) {
      padding: var(--page-padding-vertical) 0;

      .wrapper {
        flex-direction: column;
        padding: 1.125rem;

        .instructions {
          flex: none;
          width: 100%;
        }

        .sidebar {
          position: relative;
          top: unset;
          padding: 1.5rem 1.125rem;

          ul {
            &.contributors {
              max-height: 100%;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
