.tile__poster {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 4/3;
  width: 100%; 
  min-height: 45vh;
  display: flex;
  justify-content: center;
  align-items: center;

  & img, video {
    display: block;
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: -1;

  }  
  
  &:has(.align__se, .align__s, .align__sw) {
    align-items: end;
  }
  &:has(.align__nw, .align__n, .align__ne) {
    align-items: start;
  }

  &:has(.align__se, .align__e, .align__ne) {
    justify-content: end;
    text-align: right;
  }
  &:has(.align__sw, .align__w, .align__nw) {
    justify-content: start;
  }  


  

  

  & .video-ctrl {
    position: absolute;
    right: var(--m-column);
    bottom: var(--m-column);  
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    background: rgba(0,0,0,0.4);
    border-radius: 2px;
    padding: 0;
    display: flex;
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    
    &:focus {
      background-color: rgba(0,0,0,0.6);  
    }
  
    & svg {
      width: 24px;
      height: 24px;
    }        
  }

  &:has(.align__se) {
    & .video-ctrl {
      left: var(--m-column);
      right: auto;
    }
  }  
  
  & video + .video-ctrl {
    & svg:nth-of-type(1) {
      display: none;
    }
  }
  & video.paused + .video-ctrl {
    & svg:nth-of-type(2) {
      display: none;
    }
    & svg:nth-of-type(1) {
      display: flex;
    }  
  }
}

/* When image is loading */
body:has(header.clr__negative) .tile__poster {    
  & img, video {
    background-color: rgb(140, 140, 140);  
  }
}

.tile__poster-content {
  margin: var(--m-column);
  text-wrap: balance;
  color: var(--clr-section, var(--clr-black));
  background-color: var(--clr-sectionbg, transparent);
  font-size: 1.6rem;
  line-height: 1.5;
  
  
  & h2 {
    max-width: 30ch;
    font-size: var(--fs-xxl);
    font-weight: 700;
    letter-spacing: var(--ls-xxl);
    line-height: 1.1;
    margin: 0;
  }

  & h3 {
    font-size: var(--fs-xl);
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
  }

  & a {
    color: var(--clr-section, var(--clr-white));
    text-decoration: none;
    display: block;
  }
}

.tile__text {  
  color: var(--clr-section, var(--clr-black));
  background-color: var(--clr-sectionbg, transparent);
  
  & h1 {
    max-width: 30ch;
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.4em 0;
  }

  & a {
    color: var(--clr-section, var(--clr-black));
    text-decoration-color: var(--clr-section, var(--clr-black));
    text-decoration-line: underline;      
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;      
  }

  & a[data-icon] {
    background-size: 1.6em;    
  }

  & ul, ol {
    list-style: none;
    margin: 1em 0;
    padding: 0;

    & li + li {
      margin-top: 0.4em;
    }
  }
}

.tile__text-content {
  display: grid;
  grid-column: 1 / -1;   
  grid-template-columns: subgrid;  
  font-size: 1.6rem;
  line-height: 1.5;
  padding: var(--m-column) 0;  

  & > * {  
    grid-column: 2 / -2;          
  }  
}

.tiles__container-stories {
  display: grid;
  gap: 0 0;  
  grid-template-columns: repeat(var(--n-columns), minmax(0, 1fr));  
  max-width: 100%;
  margin: var(--m-column) 0;
  gap: var(--m-column) 0;

  & .tile__story {
    grid-column: 2 / -2;    
  }

  
    
}

.tile__story {
  position: relative;
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
  color: var(--clr-true-black);
  & > a {
    position: absolute;
    inset: 0 0 0 0;
    z-index: 3;    
  }

}


.tile__story-content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  
  position: relative;
  pointer-events: none;
  z-index: 4;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--clr-section, var(--clr-true-black));
  background-color: var(--clr-sectionbg, transparent);
  
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    gap: calc(var(--m-column) / 4);    
    padding: calc(var(--m-column) / 2);       
    position: relative;
    /*&::after {
      content: ' ';
      position: absolute;
      left: 0;
      right: 0;            
      bottom: -50px;
      height: 50px;      
      background-image: linear-gradient(to top, 
                                        color-mix(in srgb, var(--clr-sectionbg, transparent) 0%, transparent 100%) 0%,
                                        color-mix(in srgb, var(--clr-sectionbg, transparent) 0%, transparent 100%) 20%, 
                                        color-mix(in srgb, var(--clr-sectionbg, transparent) 100%, transparent 0%) 100%);      
      z-index: 6;
    }*/
  }

  & a {
    pointer-events: all;   
    color: var(--clr-section, var(--clr-true-black));
    text-decoration: none;
    text-decoration-line: underline;      
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;      
  }

  & h2 {
    font-size: var(--fs-l);
    margin: 0;
    font-weight: 500;
    line-height: 1.1;
  }

  & img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;    
    position: relative;
    
  }

}


.tiles__container-texts + * {
  margin-top: 0;
}

@media (min-width: 800px) {
  .tiles__container-stories {
    & .tile__story:nth-child(odd) {
      grid-column: 2 / span 5;    
    }
    & .tile__story:nth-child(even) {    
      grid-column: 8 / span 5;
    }
  }

}

/* L */
@media (min-width: 1024px) {
  
  .tile__poster {
    height: 100svh;
  } 

  .tile__text-content {
    font-size: 2.2rem;
    padding: var(--m-column) 0;  
    & > * {
      grid-column: 8 / -8;          
    }    
  }    

  .tile__poster-content {
    font-size: 2.2rem;
    max-width: calc(var(--m-column) * 10);
  }
  

  .tiles__container-stories {
    
    & .tile__story:nth-child(odd) {
      grid-column: 2 / span 10;    
    }
    & .tile__story:nth-child(even) {    
      grid-column: 13 / span 10;
    }
      
  }

  .tile__story-content {
    font-size: 1.8rem;
  }
  
}