responsive.css

/* @media screen and (max-width: 700px) {
  .logo {
    background-color: red;
  }
} */

@media only screen and (min-width: 0px) and (max-width: 500px) {
  /* nav start */

  nav {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  /* banner */

  .banner-container {
    flex-direction: column-reverse;
    margin-top: 40px;
  }

  .banner-title {
    width: 100%;
    text-align: center;
  }

  .banner-image {
    justify-content: center;
    width: 100%;
  }

  /* recent post */
  .post-container {
    flex-direction: column;
  }

  /* featured items */
  .f-one{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
}

@media only screen and (min-width: 501px) and (max-width: 800px) {
}