Mobile table formatting HTLML / CSS

Hi, do you know how to make this table better for mobile view?

And is there a way to have different text sizes inside a cell?

Here´s the HTML code for the table

<style>
.table_component {
    overflow: auto;
    width: 100%;
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: left;
}

.table_component caption {
    caption-side: top;
    text-align: left;
}

.table_component th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #000000;
    padding: 5px;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 5px;
}
</style>
<div class="table_component" role="region" tabindex="0">
<table>
    <caption>
        <p><br></p>
    </caption>
    <thead>
        <tr>
            <th>Palvelu ja kesto</th>
            <th>3 kk</th>
            <th>6 kk</th>
            <th>12 kk</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>All Inclusive Apteekin Somepaketti*<br></td>
            <td>1890 €/kk</td>
            <td>1690 €/kk</td>
            <td>1490 €/kk</td>
        </tr>
        <tr>
            <td>Apteekkarin henkilökohtainen johtamisvalmennus / coaching<br><br>Sisältö: alkukartoitus, paketin mukainen määrä tapaamisia kesto á 60 min, etätuki sähköpostilla, seuranta prosessin aikana</td>
            <td>790 €/kk<br><br>Kolme tapaamista</td>
            <td>690 €/kk<br><br>Kuusi tapaamista</td>
            <td>649 €/kk<br><br>Yhdeksän tapaamista</td>
        </tr>
        <tr>
            <td>Työyhteisövalmennus </td>
            <td>1890 €/kk<br><br>2 x valmennus johdolle, kesto á 60 min<br>1 x lähivalmennus koko henkilökunnalle, kesto 3 h<br><br><br><br></td>
            <td>1690 €/kk<br><br>
                <p>4 x valmennus johdolle, kesto á 60 min<br>2 x lähivalmennus koko henkilökunnalle, kesto 3 h</p>
                <p><br></p>
                <p><br></p>
                <p><br></p>
            </td>
            <td>1490 €/kk<br><br>
                <p>6 x valmennus johdolle, kesto á 60 min<br>2 x lähivalmennus koko henkilökunnalle, kesto 3 h</p>
                <p>2 x etävalmennus koko henkilökunnalle, kesto á 60 min 1-3 ryhmää</p>
            </td>
        </tr>
    </tbody>
</table>
  </a></div>
</div>

https://www.somefarmaseutti.fi/palvelut

I think you can consider this approach, I can give code.

• Increase width of table on Mobile >> It will overflow to scroll
• Use CSS code to fix overflow problem + set a scroll bar, so users can scroll to right to see full table