@import 'styles/_functions';

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  color: var(--theme-secondary);
  border: 1px solid;
  aspect-ratio: 1 / 1;
  padding: mobile-vw(24px);
  width: mobile-vw(343px);
  background-color: var(--background);
  backdrop-filter: blur(5px);

  &.inverted {
    color: var(--theme-primary);
    background-color: var(--theme-secondary);
  }

  @include desktop {
    width: columns(4);
    padding: desktop-vw(24px);
  }

  .number {
    color: var(--theme-contrast);
    // font-stretch: condensed;
    // font-weight: 900;
    line-height: 90%;
    // letter-spacing: -0.02em;
    font-size: mobile-vw(56px);

    @include desktop {
      font-size: desktop-vw(96px);
    }
  }

  .text {
    font-family: var(--font-panchang);
    font-weight: 700;
    text-transform: uppercase;
    // font-stretch: expanded;
    line-height: 100%;
    // letter-spacing: -0.01em;
    font-size: mobile-vw(20px);

    @include desktop {
      font-size: desktop-vw(28px);
    }

    span {
      font-stretch: normal;
      font-weight: 600;
    }
  }
}
