@layer components {

/* =================== HP MAIN CONTENT =================== */

.hp-main-content section {
  padding: var(--spacing-14) 0;  
  max-width: 1200px;
  margin: 0 auto;          
  border-radius: 10px;        
}

.hp-main-content section:nth-child(2n+1) {
  background-color: var(--x-ex-light-grey);     
}

section.hp-main--content {
  margin: 50px 20px;
}

section.hp__main--content {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 20px;
}

.hp-main-content h2,
.lp-main-content h2 {
  position: relative;
  text-align: center;
  font-size: var(--font-size-lp-h2);                    
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-6);                 
}

.hp-main-content h2::after,
.lp-main-content h2::after {
  position: absolute;
  content: '';
  width: 10%;
  height: 4px;
  left: 50%;
  bottom:-16px;
  transform: translateX(-50%);
  background-color: var(--accent-color);      
}

/* =================== responsive down =================== */
@media (max-width: 900px) {           
  .hp-main-content section { padding: var(--spacing-12) 0; }  
}

@media (max-width: 768px) {            
  .hp-main-content section { padding: var(--spacing-10) 0; } 
}

} /* end @layer components */