.sermon_box_container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-column-gap: 16px;
    grid-row-gap: 30px;
    margin-top: 15px;

}
.sample_sermons .sermon_box_container .sermon_content .sermon_topic_box{
    display: flex; 
    align-items: left;
    justify-content: left;
  }

  .sample_sermons .sermon_box_container .sermon_content .sermon_topic_box img{
    width: 40px;
    height: 40px;
    margin-right: 3px;
    border-radius: 50%;
  }

 .sample_sermons .sermon_box_container .sermon_content .sermon_topic_box h3{
    color: var(--black);  
    font-size: 15px; 
    margin: 5px 0;
    text-transform: capitalize;
  }

 .sample_sermons .sermon_box_container .sermon_content .date{
    color: var(--logout);  
    font-size: 14px; 
    margin: 5px 0;
  }

  form{
    width: 70%;
  }

  form .txt_search ion-icon{
    font-size: 23px;
    padding: 10px 0;
    position: relative;
    top: 16px;
    left: 35px;
    color: #ccc;
    /* border-right: 2px solid #ccc; */
  }
  

  .txt_search .search_box {
    height: 45px;
    position: static;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding-left: 32px;

    width: 150px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
  }
/* When the input field gets focus, change its width to 100% */
.txt_search .search_box:focus {
        width: 90%;
        font-size: 18px;
        padding-left: 35px;
        color: blue;
     }

    .search_btn {
    display: none;
  }

  
@media (max-width: 495px)
{
    form{
        width: 100%;
      }
    
      /* form .txt_search ion-icon{
        font-size: 23px;
        padding: 10px 0;
        position: relative;
        top: 16px;
        left: 35px;
        color: #ccc;
        border-right: 2px solid #ccc;
      } */
      
    
      .txt_search .search_box {
        width: 135px;
        font-size: 15px;
        /* -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out; */
      }
    /* When the input field gets focus, change its width to 100% */
    .txt_search .search_box:focus {
            width: 85%;
            font-size: 17px;
            padding-left: 35px;
         }
        
}