main.featured-projects{
    display: grid;
    grid-column: 1 / span 8; /* position */
    grid-row: 1;
    grid-template-columns: repeat(8, 1fr);  /* layout */
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Images's layout : */
figure.featured-project{
    position: sticky;
    top: var(--spacer-sm);
}

figure.featured-project.layout-1-img--4col {
    grid-column: 5 / span 5;
}

figure.featured-project.layout-1-img--6col,
figure.featured-project.layout-1-video--6col {
    grid-column: 3 / span 6;
}

figure.featured-project .media-container{
    max-height: calc(100dvh - 55px); /* Image are a bit smaller than the viewport */
    margin-left: auto;  /* pushes the images to the right */
    margin-right: 0;
    display: block;  
}

figure.featured-project.layout-1-img--4col .media-container{
    aspect-ratio: 4/5;
}

figure.featured-project.layout-1-img--6col .media-container {
  width: 100%;
}

figure.featured-project:last-child{
    height: calc(100dvh - 44px);
}

figure.featured-project:last-child .media-container{
    margin-bottom: 10px; /* leave room for footer */
}

figure.featured-project img{
    pointer-events: all;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

figure.featured-project iframe {
    display: block;
    pointer-events: all;
    height: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: calc(100dvh - 55px);
    background-color: var(--placeholder-bg-color);
}

/* Captions: */
.featured-project__captions{
    position: fixed;
    bottom: var(--spacer-sm);
    left: var(--spacer-sm);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.featured-project__captions--link{
    bottom: 32px;
}

@media not (hover: none) {
    figure.featured-project:hover .featured-project__captions{
        opacity: 1;
    }
}

/* ------------------------ */
/* -------Responsive------- */
/* ------------------------ */


/* Tablet */
@media (max-width:1100px) or (max-height:400px) or  (orientation: portrait) {

    main.featured-projects{
        grid-row: 1;
        grid-column: 5 / span 4;
        grid-template-columns: repeat(1, 1fr);
    }

    figure.featured-project .media-container,
    figure.featured-project.layout-1-img--6col .media-container {
        height: auto;
        width: auto;
    }

    figure.featured-project.layout-1-video--6col,
    figure.featured-project.layout-1-img--6col {
        grid-column: 5 / span 5;
    }

    .featured-project:last-of-type {
        height: calc(100dvh - var(--spacer-sm) * 4);
    }
}

/* phone */
@media (max-width:568px) {
   
    main.featured-projects {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 0px;
        padding: var(--spacer-sm);
        padding-top: 0px;
    }

    
    /* Default position: sticky based on sticky-mode.js calculated --featured-stick-top*/
    figure.featured-project.layout-1-img--4col,  
    figure.featured-project.layout-1-img--6col, 
    figure.featured-project.layout-1-video--6col{
        grid-column: 1 / span 8;
        position: sticky;
        top: var(--js-generated-aside-height);
        /* top: var(--featured-stick-top); */
    }

    /* When sticky-mode.js detects the images can't fit vertically revert to regular scroll */
    figure.featured-project.layout-1-img--4col.featured-no-sticky,
    figure.featured-project.layout-1-img--6col.featured-no-sticky,
    figure.featured-project.layout-1-video--6col.featured-no-sticky {
        position: static; 
    }

   figure.featured-project:last-of-type {
        height: calc(100dvh - var(--js-generated-aside-height) - var(--spacer-sm)); /* adpats the last sticky element to fill the empty space */
    }

    figure.featured-project.layout-1-img--4col.featured-no-sticky:last-of-type,
    figure.featured-project.layout-1-img--6col.featured-no-sticky:last-of-type,
    figure.featured-project.layout-1-video--6col.featured-no-sticky:last-of-type {
        height: auto;
        margin-bottom: var(--spacer-xlg); 
    }
 
    figure.featured-project .media-container {
        height: auto;
    }

    .featured-project__captions{
        display: none;
    }
}