main {
  .guitar-details-hero .guitar-details-info,
  .guitar-details-info-dialog {
    display: none;
  }

  @media (max-width: 1000px), (orientation: portrait) {
    .guitar-details-hero .guitar-details-info {
      display: grid;
      place-items: center;
      width: 2rem;
      aspect-ratio: 1;
      color: white;
      font-size: 1.25rem;
      text-decoration: none;
      text-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.5);

      i.icon {
        font-size: 1.25rem;
      }
    }

    .guitar-details-info-dialog {
      &[open] {
        display: block;
      }

      inset: 0;
      width: auto;
      height: auto;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: 4rem 1.5rem 1.5rem;
      overflow: auto;
      background: color-mix(in srgb, var(--block-background), transparent 10%);
      backdrop-filter: blur(2rem);

      > div {
        display: grid;
        gap: 1.5rem;
      }

      .guitar-details-desc {
        margin: 0;
        line-height: var(--line-height);
      }

      .guitar-details-specs {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 1rem;
        margin: 0;

        dt, dd {
          margin: 0;
        }

        dt::after {
          content: ':';
        }

        dd {
          display: grid;
          gap: 0.5rem;
          font-weight: bold;

          > div {
            display: grid;
            gap: 0.25rem;
          }

          strong {
            font-size: 0.75em;
            font-weight: 500;
            opacity: 0.75;
          }
        }
      }
    }
  }
}