.blogs {
  padding: 4em 4em 0;
  width: 100%;
}

.blog-intro {
  margin: 0 auto;
  max-width: 1300px;
}

.blogs h1, .blogs p {text-align: center;}
.blogs h1{font-size: 70px;}
body .blog-container {margin: 3em auto 0;}

.blogs-grid {
  gap: 1.5em 1em;
  margin: 0 0 3.5em;
  display: grid;
  justify-items: center;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "principal-blog principal-blog principal-blog"
    "blog1 blog2 blog3";
}

.principal-blog { grid-area: principal-blog; }
.blog1 { grid-area: blog1; }
.blog2 { grid-area: blog2; }
.blog3 { grid-area: blog3; }

.blog {
  width: 100%;
  height: 34em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3em 1.5em 1.5em;
  border-radius: 15px;
  transition: var(--global-transition);
  position: relative;
  align-items: center;
  gap: 1em;
}

.blog:hover{transform: var(--global-card-transform);}

.blog:before {
  content: '';
  position: absolute;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9128443613773635) 0%, rgba(0, 0, 0, 0) 110%);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 15px;
}

.blog.principal-blog {
  height: 40em;
  padding: 3em 4em;
  background-position: top;
  animation: breathing 9s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
  background-size: 100%;
  display: flex;
  align-items: flex-start;
}

.blog h2, .blog-meta {z-index: 1;}

.blog.principal-blog h2{
  font-size: 50px;
  text-align: left;
}

.blog h2{
  color: white;
  line-height: 1;
  font-size: 20px;
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 1em;
}

img.avatar {border-radius: 50%;}

.blog-meta p{
  color: white;
  margin: 0;
  text-transform: capitalize;
}

.see-all{
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 0;
  font-size: 20px;
}

body .store-summary {padding: 3em 4em 5em !important;}

/* Responsive Mode */
@media (max-width: 1920px){
  body .blogs {padding: 4em 2em 0;}

  body .blogs h1 {font-size: clamp(3em, 4vw, 4.4em);}
  body .blog-container {max-width: 1300px;}
  body .blog.principal-blog {height: 35em;}
  body .blog {height: 29em;}
}

@media (max-width: 1680px){
  main {
    margin: 0 auto;
    max-width: 80%;
  }
  
  body .blog {height: 25em;}
}

@media (max-width: 1440px){
  body .blog.principal-blog {height: 30em;}
}

@media (max-width: 1300px){
  body .blog.principal-blog {height: 25em;}
  body .blog {height: 20em;}

  body .blog h2 {
    font-size: 16px !important;
    height: auto;
  }
}

@media (max-width: 1200px){
  main {max-width: 95%;}
}

@media (max-width: 1100px){
  body .blogs {padding: 1em 2em 0;}
}

@media (max-width: 1024px){

  body .blog h2 {font-size: 13px !important;}
  .blog-meta p {font-size: 11px;}
}

@media (max-width: 700px){
  body .blog h2 {font-size: 18px !important;}
  body .blog-intro p{padding: 0;}

  body .blogs-grid {
    display: flex;
    padding: 0;
    flex-direction: column;
  }
  
  body .blog.principal-blog, .blog {height: 16em !important;}
  
  body .blog-meta {
    justify-content: flex-start;
    width: 100%;
  }

  .blog h2 {text-align: left;}
  
  body .blog.principal-blog h2 {
    height: auto;
    text-align: left;
  }
}