Alignment of two elements in html,css

I have the following code:

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
  display: flex;
}

.blogmaster div {
  width: 98.6%;
}

@media all and (max-width: 500px) {
  .blogmaster {flex-flow: wrap;}
}

.container1{
  display: flex;
  justify-content: center;
  padding: 20px;
    overflow: hidden;
}

.square:hover {
    -webkit-transform: translate(20px, -10px);
    -ms-transform: translate(10px, -10px);
    transform: translate(10px, -10px);
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     }


.square{
  width: 460px;
    height: 430px;
    background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}

.mask{
  clip: rect(0px, 460px, 220px, 0px);
  border-radius: 4px;
  position: absolute;
}

img1{
  width: 560px;
  }

.h11{
  margin: auto;
  text-align: left;
  margin-top: 240px;
  padding-left: 30px;
  padding-right: 30px;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}
p9 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  padding-left: 30px;
  padding-right: 30px;
  display: block;
}

.button56 {
    background-color: #3EDD84;
    color: white;
    width: 100px;
    padding: 10px 18px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 70px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'merriweather';
}

<div class="blogmaster">
<div class="column1">
      <div class="row1">
    <div class="container1">
      <div class="square">
        <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask" style="border: 5px solid #555">
     <div class="h11">Sample Text Goes here</div>
        <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in.</p9>
        
     <div><a href="#" target="_" class="button56">Read More</a></div>
      </div>
      </div>
      </div>
      </div>
      </div>
      <!-- new start of blog -->
      <div class="blogmaster">
    <div class="column1">
      <div class="row1">
    <div class="container1">
      <div class="square">
        <img src="https://www.isfasports.gr/image/cache/data/products/pr_3-1100x1100.jpg" class="mask" style="border: 5px solid #555">
     <div class="h11">Sample Text Goes Here</div>
        <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in.</p9>
        
     <div><a href="#" target="_" class="button56">Read More</a></div>
      </div>
      </div>
      </div>
      </div>
      </div>

When you run the above code, open it in a new page, inspect it to view it on a smaller device, then that is exactly what I am looking for. (Except, the image's width is a bit wider for some reason, but I can fix it later)

The two cards are algined vertically in responsive mode or when you view it on a smaller device.

The problem now is that when you want to view the cards on a larger screen, then the cards are still placed vertically, which is not what I want.

I am getting this output:

Expected Output:

When the user views the cards on a large screen such as a laptop or desktop, then this should be the output:

On a large screen, they should be placed beside each other with that amount of space between of them as seen in the expected output picture.

But, on a smaller screen, they should be placed vertically, which works fine. So, the only issue is getting the two cards to be beside each other and with that amount of space between them as seen in the expected output picture on a larger screen. Any suggestions?