Передача цвета пропсом styled.component и next.js

Есть задача:

1. сверстать несколько похожих компонентов(cкрин прикладываю)
2. использовать styled.components.

Мне кажется это можно сделать проще чем это сделано у меня.

Я на базе одного контейнера делаю другие где меняю цвет, но это получаются разные компоненты. Думаю сделать чтобы компонент был один но как то передать пропсом цвет.

export default function Box({ title, description, children }) {
  const Container = styled.div`
    width: 290px;
    height: 109px;
    color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
  `;

  const BlueContainer = styled(Container)`
    background: linear-gradient(199.15deg, #334ffe 7.38%, #6c2feb 95.63%);
    box-shadow: 0px 1px 20px rgba(90, 49, 100, 0.226972);
  `;

  const MagentaContainer = styled(Container)`
    background: linear-gradient(180deg, #b00cc8 0%, #600398 100%);
    box-shadow: 0px 1px 20px rgba(90, 49, 100, 0.226972);
  `;

  const CyanContainer = styled(Container)`
    background: linear-gradient(187.95deg, #1ac9b7 10.29%, #4da8ee 90.89%);
    box-shadow: 0px 1px 20px rgba(90, 49, 100, 0.226972);
  `;

  const Title = styled.h1`
    font-family: Open Sans, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 23px;
    margin: 20px 0 10px 0;
  `;
  const Description = styled.p`
    font-family: Open Sans, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    margin: 0 0 25px 0;
  `;

  const InfoWrap = styled.div`
    display: flex;
    flex-flow: column;
    max-width: 205px;
  `;

  return (
    <>
      <BlueContainer>
        <InfoWrap>
          <Title>{title}</Title>
          <Description>{description}</Description>
        </InfoWrap>
        <BtnBoxNext />
      </BlueContainer>
      <MagentaContainer>
        <Title>Абакус</Title>
        <Description>Потренируй свой навык ментальной арифметики.</Description>
      </MagentaContainer>
      <CyanContainer>
        <Description>Приведи друга и получи урок в подарок </Description>
      </CyanContainer>
    </>
  );
}