.blog-banner { 
    background-image: url(blog-media/banner.jpg); 
    height: 300px; 
    border-radius: 10px; 
    background-size: cover; /* Add this line to scale the image to cover the container */ 
    background-repeat: no-repeat; /* Add this line to prevent the image from repeating */ 
    background-position: center; /* Optional, to center the image horizontally and vertically */ }
  
    .blog-banner h1{
      color: white;
      font-size: 500%;
      font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
      text-align: center;
      position: relative;
    }
   main{
      margin-left: 250px;
      margin-right: 250px;
    }
    h2{
      text-align: center;
    }
    main img{
      height: 500px;
    }
    .social-media-contents a{
      color: black;
    }
    .blog-container span {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }
    .social a{
       color: #ffffff;
    background-color: black;
    width: 30px;
    height: 30px;
    text-align-last: center;
    border-radius: 5px;
    align-content: end;
        
    }
    .social{
       display:flex;font-size: 25px;gap: 10px;
        
    }
    
    @media only screen and (max-width: 480px) {
        main{
      margin-left: 20px;
      margin-right: 20px;
    }
    .blog-banner { 
        height: 200px; 
    }
    

}


@media only screen and (min-width: 481px) and (max-width: 768px) {
    .blog-banner { 
        height: 200px; 
    }
      main{
      margin-left: 20px;
      margin-right: 20px;
    }

}