Nextjs - Styling nested element with css modules

I Have a Countdown component which looks like this

import styles from "./Countdown.module.scss";
import React from "react";
import useTimer from "hooks/useTimer";
import cn from "classnames";

function Countdown({ date,className="" }) {
  const { days, hours, minutes, seconds } = useTimer(date);
  return (
    <div className={cn(styles.countdown,className)}>
      <div className={styles.box}>
        <p className={styles.number}>{days}</p>
        <p className={styles.type}>Days</p>
      </div>
      <div className={styles.seperator}>:</div>
      <div className={styles.box}>
        <p className={styles.number}>{hours}</p>
        <p className={styles.type}>Hours</p>
      </div>
      <div className={styles.seperator}>:</div>
      <div className={styles.box}>
        <p className={styles.number}>{minutes}</p>
        <p className={styles.type}>Minutes</p>
      </div>
    </div>
  );
}

export default Countdown;

I have the home page which looks like this

import styles from "../styles/Home.module.scss";
import Countdown from "components/ui/Countdown";
export default function Home() {
  return (
    <div className={styles.container}>
      {/* top summary */}
      <div className={styles.summary}>
          <Countdown date={"10/06/2021"} className={style.homeCountdown} />
      </div>
    </div>
  );
}

I want to add a specific style to the hours p tag when I am on my home page

Are there any options to modify the hours' style in my Countdown component by giving one main className ("homeCountdown") to it from the home page? without giving specific prop to it