/* Couleurs de fonds des blocks auxiliaires */

#row-one .aux-block {
    background: rgb(var(--yel5));
}
#row-one .aux-block h2 {
    background: rgb(var(--yel4));
}
#row-one .aux-block h2:hover {
    background: rgb(var(--yel3));
}

#row-two .aux-block {
    background: rgb(var(--maj6));
}
#row-two .aux-block h2 {
    background: rgb(var(--maj5));
}

#row-three .aux-block {
    background: rgb(var(--yel5));
}
#row-three .aux-block h2 {
    background: rgb(var(--yel4));
}


/* Grid definition */

#home-layout, #row-one, #row-two, #row-three, #features, #locals .content, #groups .content, #globals .content, .row, .col {
    display: grid;
    grid-gap: var(--gridgap);
}

#home-layout {
    padding: 0;
    grid-template-rows: auto auto auto;
}
@media (min-width: 992px){
    #home-layout {
        padding: 0 8px;
    }
}

#row-one {
    padding: 0;
}

#row-two {
    margin-top: 0em;
}

#row-three {
    margin-top: 0;
    margin-bottom: 2rem;
}

#features {
    padding: 1vw;
}

@media (min-width: 768px){

    #locals .content {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6, auto);
    }

    #groups .content {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    #globals .content {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
    }
}

@media (min-width: 992px){
    
    #row-one {
        margin: 0;   
    }

    #row-two {
        margin: 2rem 0;
    }
    
    #row-one {
        margin-top: 1rem;
        grid-template-columns: 3fr 1fr;
    }
    #row-one .block {
        margin-top: 0;
    }
    
    #features {
        padding: 0;
        grid-template-rows: repeat(2, max-content);
    }

    #features .row:nth-child(1) {
        grid-template-columns: 2fr 1fr;
    }
    #features .row:nth-child(2) {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Agenda */
    #events {
        grid-template-rows: max-content;
    }


    #row-two {
        grid-template-columns: 2fr 1fr;
    }
    /* Breves + podcast */
    #row-two .col:nth-child(2) {
        grid-template-rows: repeat(2, max-content);
    }
    
    
    #row-three {
        grid-template-rows: auto auto;
    }
   
    /* groups + tags */
    #row-three .row:nth-child(1) {
        grid-template-columns: 3fr 1fr;
    }
    
    #groups .content {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
    }
    
    /* Global + misc */
    #row-three .row:nth-child(2) {
        grid-template-columns: 1fr 1fr;
    }

    /* Global */
    #row-three .row:nth-child(2) > .col {
        grid-column: 2;
    }
    
    /* Misc */
    #row-three .row:nth-child(2) > .row {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr 1fr;
    }
    /* Zines + awaiting + moderation */
    #row-three .row:nth-child(2) > .row .col:nth-child(1) {
        grid-column: 1;
        grid-template-rows: repeat(3, max-content);
    }
    /* places + aileurs */
    #row-three .row:nth-child(2) > .row .col:nth-child(2) {
        grid-column: 2;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, max-content);
    }
    
}

/* Overwrite general spec */

.block {
	margin-top: 0em;
}


/* Features */

.feature {
    position: relative;
    display: block;
    background: rgb(var(--grey6)) !important;
    box-shadow: 0 0em 0.1rem rgb(var(--grey4));
    height: 100%;
    color: rgb(var(--grey1));
	max-width: 98vw
}
.feature:hover {
    box-shadow: 0 0 0.3rem #666666;
}

.feature .img-container {
    width: 100%;
    height: 144px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-feature {
    display: block;
    width: 100%;
    filter: blur(0px);
    transform: scale(1,1);
    transition: filter 0.1s, transform 0.5s;
}

.feature:hover .image-feature {
    filter: blur(2px);
    transform: scale(1.01,1.01);
    transition: filter 0.05s, transform 0.2s;
}

.feature h3 {
    margin: 0;
}

#main-feature h3 {
    font-size: 1.8rem;
    line-height: 1.8rem;
}

@media (min-width: 992px){
    #main-feature h3 {
        font-size: 2rem;
        line-height: 2rem;
    }
}

.feature-content {
    padding: 0.6rem;
    margin-bottom: 1.2rem;
    color: rgb(var(--grey1));
    max-height: 250px;
    overflow: hidden;
}

.feature-content-wrapper img {
	display: none;
}

.feature:hover .feature-content,
.feature:focus .feature-content {
    color: rgb(var(--grey1));
}