Minimizing data for mobile view only - css

Question

I have a website that shows "cards" on a pinboard, 7 wide on a pc down to 4 wide on an ipad.
What I would like to happen is when the user views this on an iphone, the image with a class of "image eventItem" stays in the same location and the h4 "pinboard-day", the h4 "pinboard-date" and the p "pinboard-text" moves up on top of the image to the right and changes from black to white.
What I am trying to acheive is similar to an accordian, so that when the user clicks on the image on an iphone the standard view will appear as for pc etc.
I currently have over 150 events currently, so I am looking for a way to acheive this without having to re-write everything out again.
Any help would be appreciated.
Regards
Milton.
<div class="wrapper-pinboard">
<nav>
<div class="items">
<span id="all-btn" class="item active" data-name="all" >All</span>
<span class="item" data-name="site1" class="list">Site 1</span>
<span class="item" data-name="site2" class="list">Site 2</span>
<span class="item" data-name="site3" class="list">Site 3</span>
<span class="item" data-name="site4" class="list">Site 4</span>
<span class="item" data-name="site5" class="list">Site 5</span>
<span class="item" data-name="site6" class="list">Site 6</span>
</div>
</nav>
<div class="gallery">
<div class="image eventItem" date="30-10-21" id="site1" data-name="site1">
<span><img src="img/Site1-logo.jpg" alt=""></span>
<h4 id="pinboard-day">Thursday night</h4>
<h4 id="pinboard-date" >30th October</h4>
<p id="pinboard-text"><b>All Welcome</b> </p>
<br>
<p> $20 Entrance Fee
<br> Doors Open 6:00PM
<br> Headline act is -
<br> Intermission 7:30PM
<br>
<br> <b>Doors Close - 8:30PM</b>
</p>
<div class="card-bottom">
<img id="card-bottom-site1-image" src="img/site1-139x113px.jpg" alt="">
<p class="card-text-bottom">
Premises
<br>Street Address
<br>City
</p>
</div>
</div>
<div class="image eventItem" date="10-10-21" id="site2" data-name="site2">
<span><img src="img/Site2-logo.jpg" alt=""></span>
<h4 id="pinboard-day">Thursday night</h4>
<h4 id="pinboard-date" >10th October</h4>
<p id="pinboard-text"><b>All Welcome</b> </p>
<br>
<p> $30 Entrance Fee
<br> Doors Open 7:00PM
<br> Headline act is -
<br> Intermission 8:30PM
<br>
<br> <b>Doors Close - 9:30PM</b>
</p>
<div class="card-bottom">
<img id="card-bottom-site2-image" src="img/site2-139x113px.jpg" alt="">
<p class="card-text-bottom">
Premises
<br>Street Address
<br>City
</p>
</div>
</div>
</div>
</div>
CSS:
:root {
--light-blue: rgb(13, 110, 253);
--dark-blue: rgb(52, 73, 94);
--gold: rgb(255, 193, 7);
--black-mine: rgb(33, 36, 41);
--grey: rgb(108, 117, 125);
--white: #ffffff;
--black-pure: #000;
--light-red: rgb(255, 96, 85);
}
.wrapper-pinboard {
margin: 100px auto;
margin-left: 15px;
margin-right: 15px;
max-width: 100%;
}
.wrapper-pinboard .items {
display: flex;
max-width: 100%;
width: 100%;
justify-content: space-around;
}
#year-buttons .button-years {
display: flex;
max-width: 1600px;
width: 100%;
position: absolute;
justify-content: space-around;
top: 315px;
}
.items span {
padding: 7px 7px;
font-size: 18px;
font-weight: 500;
color: #34495e;
border-radius: 50px;
border: 2px solid #34495e;
transition: all 0.3s ease;
min-width: 100px;
text-align: center;
}
#all-btn {
width: 70px;
text-align: center;
}
.items span.active {
color: var(--white);
background: var(--dark-blue);
}
.items span:hover {
color: var(--white);
background: var(--dark-blue);
}
#click-photo {
color: var(--dark-blue);
font-size: 24px;
font-weight: 500;
padding-top: 20px;
text-align: center;
}
#days-clubs-btn {
width: 150px;
height: 30px;
position: absolute;
top: 160px;
left: 50px;
text-decoration: none;
color: #fff;
border: solid .5px var(--grey);
border-radius: 8px;
align-items: center;
justify-content: center;
}
#days-clubs-btn i {
text-align: center;
padding-left: 8px;
padding-top: 10px;
text-decoration: none;
align-items: center;
justify-content: center;
}
.gallery {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
justify-content: space-evenly;
}
.gallery .image {
width: calc(100% / 7);
padding: 7px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: whitesmoke;
box-shadow: 6px 4px 18px;
}
.gallery #site1 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(241, 241, 241);
box-shadow: 6px 4px 18px;
position: relative;
}
.gallery #site2 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(241, 245, 229);
box-shadow: 6px 4px 18px;
position: relative;
}
.gallery #site3 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(220, 220, 220);
box-shadow: 6px 4px 18px;
}
.gallery #site4 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(241, 241, 241);
box-shadow: 6px 4px 18px;
}
.gallery #site5 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(236, 237, 245);
box-shadow: 6px 4px 18px;
}
.gallery #site6 {
width: calc(100% / 7);
padding: 10px 5px 10px 5px;
margin: 5px;
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
background-color: rgb(236, 237, 245);
box-shadow: 6px 4px 18px;
}
.gallery .image span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site1 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site2 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site3 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site4 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site5 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image #site6 span {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.gallery .image img {
width: 100%;
vertical-align: middle;
border-radius: 8px;
}
.gallery .image #site1 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site2 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site3 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site4 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site5 img {
width: 100%;
vertical-align: middle;
}
.gallery .image #site6 img {
width: 100%;
vertical-align: middle;
}
.gallery .image.hide {
display: none;
}
.gallery .image.show {
animation: animate 0.4s ease;
width: calc(100% / 8);
height: calc(100% / 3);
border: solid .5px var(--grey);
border-radius: 8px;
position: relative;
}
/* THE DATE */
h4 {
padding-top: 10px;
text-align: center;
font-weight: 500;
font-size: 1rem;
}
/* THE TEXT */
p {
padding-bottom: 20px;
text-align: center;
font-weight: 200;
font-size: 1rem;
}
#pinboard-date {
color: var(--light-blue);
}
#pinboard-day {
color: var(--light-red);
}
#pinboard-text {
color: var(--black-pure);
}
.card-bottom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
#card-bottom-site1-image {
width: 25%;
padding-top: 20px;
}
#card-bottom-site2-image {
width: 20%;
padding-top: 20px;
}
#card-bottom-site3-image {
width: 40%;
padding-top: 20px;
}
#card-bottom-site4-image {
width: 40%;
padding-top: 20px;
}
#card-bottom-site5-image {
width: 25%;
}
#card-bottom-site6-image {
width: 20%;
}
.card-text-bottom {
display: flex;
flex-direction: column;
font-size: 12px;
}
#card-bottom-apl2-image {
width: 33%;
height: 33%;
}