@media (min-width: 768px) {
  .blog-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 150px;
    position: relative;
  }

  .blog-container img {
    width: 50%;
  }
  .blog-container header {
    text-align: center;
    padding: 20px;
  }
  .blog-container article {
    width: 70%;
  }
  .blog-container ol {
    list-style: decimal;
    padding-left: 20px;
  }
  .blog-container li {
    margin-bottom: 10px;
  }
  .blog-container .blog-back-btn {
    position: absolute;
    left: 150px;
    top: -70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
  }
  .blog-container .blog-back-btn span {
    margin-right: 5px;
    height: 25px;
    cursor: pointer;
  }
  .blog-container .blog-back-btn label {
    height: 25px;
    cursor: pointer;
  }
}
@media (max-width: 768px) {
  .blog-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 150px;
    position: relative;
  }

  .blog-container img {
    width: 90%;
  }
  .blog-container header {
    text-align: center;
    padding: 20px;
  }
  .blog-container article {
    width: 85%;
  }
  .blog-container ol {
    list-style: decimal;
    padding-left: 20px;
  }
  .blog-container li {
    margin-bottom: 10px;
  }
  .blog-container .blog-back-btn {
    position: absolute;
    left: 20px;
    top: -70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 5px;
  }
  .blog-container .blog-back-btn span {
    margin-right: 5px;
    height: 25px;
    cursor: pointer;
  }
  .blog-container .blog-back-btn label {
    height: 25px;
    cursor: pointer;
  }
}