Album cards not flexing in row direction - ipad view - reactjs

Question

I am trying to set the 2 columns for tablet view but for some reason the albums dont flex in row direction. I am using react an.
Can someone help me see the issue?
I leave these links for full code:
https://music-release-site-by-maria-and-daniela.netlify.app/
https://github.com/dannuzak/project-music-releases
Mobile view CSS
* {
box-sizing: border-box;
margin: 0;
text-decoration: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #111418;
}
.header {
margin: 40px;
padding-bottom: 10px;
font-size: 0.8rem;
border-bottom: #353a45 solid 1px;
color: #fff;
}
.albums-container {
display: flex;
flex-direction: column;
align-content: center;
margin: 10%;
}
.album-card {
margin-bottom: 10%;
height: 360px;
margin-bottom: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.album-cover {
/* height: 300px;
width: 100%; */
position: relative;
}
.cover {
width: 100%;
}
#media all and (min-width: 768px) {
.albums-container {
display: flex;
width: 95%;
margin: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.album-card {
width: 40%;
display: flex;
flex-direction: column;
flex-wrap: wrap; // I have removed this //
}
}
---- Header component--
import React from 'react'
const Header = () => {
return (
<header className="header">
<h1>New albums & singles</h1>
</header>
);
}
--------- Album component
<>
<div className="album-card">
<div className = "album-cover">
<div className="icon-container">
<img className="icon heart" src="/icons/heart.svg" alt="heart icon"/>
<img className="icon play" src="/icons/play.svg" alt="play button icon"/>
<img className="icon dots" src="/icons/dots.svg" alt="dots icon"/>
</div>
<a href={props.urlAlbum} target= "_blank" rel="noopener noreferrer">
<img className="cover" src={props.image} alt="Album cover"/>
</a>
</div>
<div>
<a href={props.urlAlbum} target= "_blank" rel="noopener noreferrer">
<h2 className="album-name">{props.name}</h2>
</a>
</div>
<div className="album-artist">
<a href={props.urlArtist} target= "_blank" rel="noopener noreferrer">
<h2>{props.artists}</h2>
</a>
</div>
</div>
</>
export default Header;