Add Chevron Image to Tab on Mobile Size - css

Question

I am trying to make a 3-tab layout using CSS that is responsive. I have two issues. The first is the third tab won't line up with the box. It's just a tad bit off.
The second issue is I would like to show chevron images on mobile screens (up to close, down to expand). I am not sure how to do this.
Here is my HTML.
<section class="tabs-wrapper">
<div class="tabs-container">
<div class="tabs-block">
<div class="tabs">
<input type="radio" name="tabs" id="tab1" checked="checked" />
<label class="label1" for="tab1"><!--<span class="material-icons">favorite_border</span>-->
QuickBooks for
Manufacturing & Distribution</label>
<div class="tab">
<!-- <h2>Angular</h2> -->
<div class="flex-container">
<div class="tab-list-item-left">
<ul>
<li>Monitor and track inventory.</li>
<li>Create bills of material and work orders.</li>
<li>Set up accurate COGS and inventory costing system.</li>
<li>Assist in inventory assembly setup and implementation.</li>
</ul>
</div>
<div class="tab-list-item-right">
<ul>
<li>Capture indirect and direct costs.</li>
<li>Build sales order reports.</li>
<li>Track profit and loss.</li>
</ul>
</div>
</div>
</div>
<input type="radio" name="tabs" id="tab2" />
<label class="label2" for="tab2"><!-- <span class="material-icons">face</span>--> QuickBooks for
Professional
Services</label>
<div class="tab tab-2">
<!-- <h2>React</h2> -->
<div class="flex-container">
<div class="tab-list-item-left">
<ul>
<li>Track time and expenses.</li>
<li>Set up separate billing rates and customized invoices.</li>
</ul>
</div>
<div class="tab-list-item-right">
<ul>
<li>Analyze profitability by project or client.</li>
<li>Process payroll.</li>
</ul>
</div>
</div>
</div>
<input type="radio" name="tabs" id="tab3" />
<label class="label3" for="tab3"><!--<span class="material-icons">lightbulb</span>--> QuickBooks
for
E-Commerce</label>
<div class="tab tab-3">
<!-- <h2>Vue</h2> -->
<div class="flex-container">
<div class="tab-list-item-left">
<ul>
<li>Set up client-specific reports to track financial data.</li>
<li>Bill clients.</li>
</ul>
</div>
<div class="tab-list-item-right">
<ul>
<li>Manage inventory.</li>
<li>Create profit and loss reports.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Now, here is my CSS.
/**
* Reset
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color: #e5e5e5;
color: #1a1a1a;
font-family: "Source Sans Pro", sans-serif;
font-size: 1rem;
line-height: 1.6;
}
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/**
* Global Rules
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #0d0d0d;
font-family: Roboto, sans-serif;
line-height: 1.2;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 35px;
}
a,
a:visited {
background-color: transparent;
color: #0067b8;
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover,
a:active {
border-bottom: none;
outline: 0;
}
a:focus {
border-bottom: none;
outline: thin dotted;
}
a img {
border: 0;
}
/**
* Tabs Container
*/
.tabs-container {
padding: 0.5rem;
}
/**
* Tabs Block
*/
.tabs-block {
display: flex;
align-items: center;
justify-content: center;
}
/**
* Tabs
*/
.tabs {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.tabs label {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.5rem;
margin-right: 0.079rem;
cursor: pointer;
/*background-color: #000;*/
color: #000;
font-family: Roboto, sans-serif;
font-size: 0.75rem;
font-weight: 700;
transition: background-color ease 0.3s;
border: 1px solid black;
}
.label1 {
background-color: #fff;
}
.label2 {
background-color: #ededed;
}
.tabs .label3 {
background-color: #cecece;
padding-left: 51px;
padding-right: 41px;
}
.tabs label .material-icons {
margin-right: 0.3rem;
}
.tabs .tab {
flex-grow: 1;
width: 100%;
height: 100%;
display: none;
padding: 1rem 2rem 1rem 2rem;
/*color: #000;*/
background-color: #fff;
/*box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);*/
border: 1px solid black;
border-top: none;
}
.tabs .tab-2 {
background-color: #ededed;
}
.tabs .tab-3 {
background-color: #cecece;
}
.tabs .tab > *:not(:last-child) {
margin-bottom: 0.8rem;
}
.tabs [type="radio"] {
display: none;
}
.tabs [type="radio"]:checked + label {
/*background-color: #fff;*/
color: #283841;
/*border-top: 4px solid #0067b8; */
/*box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);*/
}
.tabs [type="radio"]:checked + label + .tab {
display: block;
}
#media (min-width: 770px) {
body {
font-size: 1.125rem;
}
.tabs-container {
padding: 4rem 4rem;
}
.tabs label {
order: 1;
width: auto;
}
.tabs .tab {
order: 9;
}
.tabs [type="radio"]:checked + label {
border-bottom: none;
}
}
#media (min-width: 992px) {
.tabs {
width: 800px;
}
}
ul {
list-style-image: url("https://wordpress-833610-3044148.cloudwaysapps.com/wp-content/uploads/2022/12/Icons-87-18x16-1.png");
}
li {
padding: 0.5em;
margin: 1px;
}
.flex-container {
display: flex;
flex-direction: row;
}
.tab-list-item-left {
padding: 3px;
flex: 50%;
}
.tab-list-item-right {
padding: 3px;
flex: 50%;
}
Can someone walk me through how to add the chevron images when viewing on a mobile screen?