.itp-popup {
  max-width: 520px; min-width: 300px;
  background-image: url(https://files.tablegroup.com/wp-content/uploads/2025/08/05073538/ITP-Popup-TG-Asset-1.webp);
  background-repeat: no-repeat; background-size: cover; background-position: center top;

  .itp-newly-released {
    img {
      max-width: 7rem;
      position: absolute;

      @media (max-width: 800px) {
        max-width: 6rem;
      }
    }
  }

  .itp-popup-container {
    display: flex;
    flex-direction: row;
    place-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 1rem;
    margin-top: 4rem;
    gap: 1rem;
  }

  .itp-product-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 2rem;
    color: white;
    letter-spacing: 0.1rem;

    @media (max-width: 768px) {
      line-height: 1.7rem;
    }

    @media (max-width: 640px) {
      line-height: 1.5rem;
      letter-spacing: 0;
    }

    .itp-product-title-span {
      font-size: 2.3rem;
      font-family: Alverata, sans-serif;

      @media (max-width: 768px) {
        font-size: 1.65rem;
      }

      @media (max-width: 640px) {
        font-size: 1.3rem;
      }

      .itp-product-title {
        font-size: 2rem;
        text-transform: capitalize;

        @media (max-width: 768px) {
          font-size: 1.5rem;
        }

        @media (max-width: 640px) {
          font-size: 1.2rem;
        }
      }
    }
  }

  .itp-product-subtitle-container {
    place-items: center;
    font-family: Montserrat, sans-serif;
    color: white;
    text-align: center;

    .itp-product-subtitle {
      font-weight: 400;
    }

    @media (max-width: 768px) {
      font-size: 1.125rem;
    }

    @media (max-width: 640px) {
      font-size: 1rem;
    }
  }

  .itp-product-virtues-container {
    place-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: bold;
    color: white;

    @media (min-width: 640px) {
      gap: 1rem;
    }

    .itp-product-virtues {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;

      .virtue {
        font-size: 1rem;
        line-height: 1.65rem;

        @media (min-width: 640px) {
          font-size: 1.25rem;
          line-height: 1.75rem;
        }
      }
    }
  }

  .itp-button {
    padding: 0.625rem 1.25rem;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
    background-color: #7f909b;
    transition: background-color 0.2s ease-in-out;
    font-size: 0.875rem;

    @media (min-width: 640px) {
      font-weight: 600;
      padding: 0.7rem 1.25rem;
    }

    &:hover {
      background-color: #374151;
      color: white;
    }
  }
}