CSS - Maintain the aspect ratio proportionally across breakpoints

Question

.leaderboard-ad-container {
    width: 100%;
    max-width: 970px; /* Max width of the ad */
    height: auto;
    aspect-ratio: 970 / 250; /* Maintain the 970x250 aspect ratio */
    transition: height 1s ease; /* Smooth transition for resizing */
    background-image: url('https://test/uploads/2019/02/970x250-test.jpg'); /* Default small image */
    background-size: cover;
    background-position: center;
    margin-bottom: 20px; 
    margin-left: auto;
    margin-right: auto;
}