/* Schema di massima per seuqenza props

  .component {

    // -------------------  1. Layout
    display: flex;
    flex-direction: column;

    // -------------------  2. Size
    width: 100%;
    min-height: 50px;

    // -------------------  3. Box model
    padding: 16px;
    margin: 8px 0;

    // -------------------  4. Visual
    background: white;
    border: 1px solid #ddd;

    // -------------------  5. Typography
    font-size: 14px;
    color: #333;

    // -------------------  6. Interactions
    transition: background 0.2s;
    
    // -------------------  Hover & Pseudos
    &:hover {
      background: #f0f0f0;
    }

  }
  
*/

/*

  Pages:
    
    /servizi
    /offerta
  ---

*/
/*

  /servizi
    
    Hero-Services
    Services-Steps
    Slider Text
    Slider Heading
    Slider Transition // Anatomy
    Slider Featworks
  ---

*/
body.blog-post {
  
  /* Elemento BEFORE per simulare lo sfondo diviso a metà con bordi arrotondati, per far sembrare che le featured images escano fuori dallo sfondo scuro */
  .next-post__featwork::before, .next-post__featwork::after {
    content: '';
  }
  .next-post__featwork {
    display: grid;
    position: relative;
  }
  .next-post__featwork::before {
    position: absolute;
    inset: 0 var(--frame-padding) 50%;
    background-color: var(--color-primary-dark);
    border-end-start-radius: calc(var(--common-image-border-radius) * 2);
    border-end-end-radius: calc(var(--common-image-border-radius) * 2); 
    z-index: -1;
  }

}