@import '../components/cart.css';

body{
  height:100vh;
}

section{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    min-height:64vh;
    font-size:var(--text-small-d);
    line-height:var(--text-normal-d);
}

.multi-colonnes{
    column-count: 4;
    column-gap: var(--spacing-medium-w);
    column-fill: auto; 
    height:60vh;
    width:calc(100vw - 3vw);
}

.multi-colonnes p{
    margin-bottom:var(--spacing-medium-h);
    orphans: 5;
    widows: 5;
}

.multi-colonnes img{
    width:100%;
}

.bloc-image{
    position:relative;
}

.bloc-image figcaption.credit{
    position:absolute;
    bottom:0;
    color:var(--color-fourth);
    left:1vh;
    width:cacl(100% - 2vh);
    padding:1vh;
    text-align:right;
    z-index:10;
    transform: rotate(-90deg);
    transform-origin: left;
    font-size:var(--text-small-d);
}


@media screen and (max-width: 1080px) {

    .content {
        height: auto;
        min-height: calc(var(--real-vh, 1vh) * 100);
        display: flex;
        flex-direction: column;
    }

    section{
        min-height:auto;
        width:calc(100vw - 5vw);
        flex:1;
        padding: 4vh 2.5vw 30px 2.5vw;
        font-family: 'Akkurat-Light', sans-serif;
    }

    .multi-colonnes{
        margin-bottom:30px;
    }

    .multi-colonnes p:nth-last-child(1){
        margin-bottom:0;
    }

    .multi-colonnes img{
        width:100%;
        margin-bottom:var(--spacing-big-h);
    }
    
    .bloc-image figcaption.credit{
        bottom:2vh;
    }

}


@media screen and (max-width: 768px) {

    .multi-colonnes{
      column-count: 1;
      height:auto;
      width:calc(100vw - 5vw);
      column-gap: 0;
    }
}


@media (min-width: 769px) and (max-width: 1080px) {

    .multi-colonnes{
      column-count: 2;
      height:auto;
      column-fill: balance;
      width:calc(100vw - 5vw);
      column-gap: var(--spacing-medium-w);
    }

}