/* Custom CSS for Aerofolio Blog Detail 
   Provides styling for classes that are not pre-compiled in the main template CSS */

.blog-article-container {
  padding-top: 3rem;
  padding-bottom: 6rem;
  width: 100%;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: #ffffff;
  margin-top: 8rem;
  margin-bottom: 3rem;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
  .blog-article-container {
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.blog-article-image-wrapper {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 3rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.blog-article-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 500px;
}

.blog-article-content {
  overflow-wrap: break-word;
  color: #1f2937;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .blog-article-content {
    font-size: 1.25rem;
    line-height: 1.75;
  }
}