.main { /* Placement: */ display: flex; justify-content: space-between; padding: 40px 40px 40px 80px; gap: 1.5rem; } .main > p:nth-child(1) { /* Placement: */ position: fixed; display: flex; margin: 0; left: 66px; bottom: 139px; transform: rotate(-90deg); transform-origin: 0% 100%; /* Texts: */ font-size: 50px; font-family: 'dxr'; } .main > div:nth-child(2) { /* Placement: */ width: 33%; /* Texts: */ font-family: 'ibm'; font-size: 15px; } .main > div:nth-child(2) > p { /* Placement: */ position: sticky; top: 75px; } .main > div:nth-child(3) { width: 67%; } /** ################# * ### PROJETS ### * ################# **/ /* Marquette (8 images) */ #grid-marquette > a:nth-child(1) { grid-area: i1; width: 60%; } #grid-marquette > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(2) { grid-area: i2; } #grid-marquette > a:nth-child(2) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(3) { grid-area: i3; width: 60%; } #grid-marquette > a:nth-child(3) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(4) { grid-area: i4; } #grid-marquette > a:nth-child(4) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(5) { grid-area: i5; } #grid-marquette > a:nth-child(5) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(6) { grid-area: i6; } #grid-marquette > a:nth-child(6) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(7) { grid-area: i7; } #grid-marquette > a:nth-child(7) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette > a:nth-child(8) { grid-area: i8; } #grid-marquette > a:nth-child(8) > img { height: auto; width: 100%; object-fit:fill; } #grid-marquette { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i2 i2 i2 i2 i2 i2" "i1 i1 i1 i1 i2 i2 i2 i2 i2 i2" "i3 i3 i3 i3 i4 i4 i4 i4 i4 i4" "i3 i3 i3 i3 i4 i4 i4 i4 i4 i4" "i5 i5 i5 i5 i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5 i5 i5 i5 i5" "i6 i6 i6 i6 i6 i7 i7 i7 i7 i7" "i6 i6 i6 i6 i6 i7 i7 i7 i7 i7" "i6 i6 i6 i6 i6 i8 i8 i8 i8 i8" "i6 i6 i6 i6 i6 i8 i8 i8 i8 i8" ; } /* Typo.Geste (5 images) */ #grid-typo-geste > a:nth-child(1) { grid-area: i1; width: 100%; } #grid-typo-geste > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-typo-geste > a:nth-child(2) { grid-area: i2; width: 100%; height: 100%;} #grid-typo-geste > a:nth-child(2) > img { height: inherit; width: inherit; object-fit:fill; } #grid-typo-geste > a:nth-child(3) { grid-area: i3; width: 100%; height: 100%;} #grid-typo-geste > a:nth-child(3) > img { height: inherit; width: inherit; object-fit:fill; } #grid-typo-geste > a:nth-child(4) { grid-area: i4; width: 100%; height: 100%;} #grid-typo-geste > a:nth-child(4) > img { height: inherit; width: inherit; object-fit:fill; } #grid-typo-geste > a:nth-child(5) { grid-area: i5; width: 100%; height: 100%;} #grid-typo-geste > a:nth-child(5) > img { height: inherit; width: inherit; object-fit:fill; } #grid-typo-geste { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i2 i2 i2 i2 i2 i3 i3 i3" "i2 i2 i2 i2 i2 i3 i3 i3" "i2 i2 i2 i2 i2 i3 i3 i3" "i2 i2 i2 i2 i2 i3 i3 i3" "i4 i4 i4 i4 i5 i5 i5 i5" "i4 i4 i4 i4 i5 i5 i5 i5" "i4 i4 i4 i4 i5 i5 i5 i5" ; } /* Reflets (3 images) */ #grid-reflets > a:nth-child(1) { grid-area: i1; } #grid-reflets > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-reflets > a:nth-child(2) { grid-area: i2; } #grid-reflets > a:nth-child(2) > img { height: auto; width: 100%; object-fit:fill; } #grid-reflets > a:nth-child(3) { grid-area: i3; } #grid-reflets > a:nth-child(3) > img { height: auto; width: 100%; object-fit:fill; } #grid-reflets { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i2 i3 i3 i3" "i2 i2 i2 i3 i3 i3" "i2 i2 i2 i3 i3 i3" "i2 i2 i2 i3 i3 i3" ; } /* OZEI (3 images) */ #grid-ozei > a:nth-child(1) { grid-area: i1; } #grid-ozei > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-ozei > a:nth-child(2) { grid-area: i2; } #grid-ozei > a:nth-child(2) > img { height: auto; width: 100%; object-fit:fill; } #grid-ozei > a:nth-child(3) { grid-area: i3; width: 100%; } #grid-ozei > a:nth-child(3) > img { height: auto; width: 100%; object-fit:fill; } #grid-ozei { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i3 i3 i3 i3 i3 i3" "i3 i3 i3 i3 i3 i3" "i3 i3 i3 i3 i3 i3" "i3 i3 i3 i3 i3 i3" ; } /* Protege ta nuque (21 images) */ #grid-protege-ta-nuque > a:nth-child(1) { grid-area: i1 ; } #grid-protege-ta-nuque > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(2) { grid-area: i2 ; } #grid-protege-ta-nuque > a:nth-child(2) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(3) { grid-area: i3 ; } #grid-protege-ta-nuque > a:nth-child(3) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(4) { grid-area: i4 ; } #grid-protege-ta-nuque > a:nth-child(4) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(5) { grid-area: i5 ; } #grid-protege-ta-nuque > a:nth-child(5) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(6) { grid-area: i6 ; } #grid-protege-ta-nuque > a:nth-child(6) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(7) { grid-area: i7 ; } #grid-protege-ta-nuque > a:nth-child(7) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(8) { grid-area: i8 ; } #grid-protege-ta-nuque > a:nth-child(8) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(9) { grid-area: i9 ; } #grid-protege-ta-nuque > a:nth-child(9) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(10) { grid-area: i10; } #grid-protege-ta-nuque > a:nth-child(10) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(11) { grid-area: i11; } #grid-protege-ta-nuque > a:nth-child(11) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(12) { grid-area: i12; } #grid-protege-ta-nuque > a:nth-child(12) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(13) { grid-area: i13; } #grid-protege-ta-nuque > a:nth-child(13) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(14) { grid-area: i14; } #grid-protege-ta-nuque > a:nth-child(14) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(15) { grid-area: i15; } #grid-protege-ta-nuque > a:nth-child(15) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(16) { grid-area: i16; } #grid-protege-ta-nuque > a:nth-child(16) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(17) { grid-area: i17; } #grid-protege-ta-nuque > a:nth-child(17) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(18) { grid-area: i18; } #grid-protege-ta-nuque > a:nth-child(18) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(19) { grid-area: i19; } #grid-protege-ta-nuque > a:nth-child(19) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque > a:nth-child(20) { grid-area: i20; width: 100%; height: 100%; } #grid-protege-ta-nuque > a:nth-child(20) > img { height: 100%; width: 100%; object-fit:cover; } #grid-protege-ta-nuque > a:nth-child(21) { grid-area: i21; } #grid-protege-ta-nuque > a:nth-child(21) > img { height: auto; width: 100%; object-fit:fill; } #grid-protege-ta-nuque { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i9 i9 i9 i10 i10 i10" "i9 i9 i9 i10 i10 i10" "i11 i11 i11 i12 i12 i12" "i11 i11 i11 i12 i12 i12" "i13 i13 i13 i14 i14 i14" "i13 i13 i13 i14 i14 i14" "i15 i15 i15 i16 i16 i16" "i15 i15 i15 i16 i16 i16" "i17 i17 i17 i18 i18 i18" "i17 i17 i17 i18 i18 i18" "i19 i19 i20 i20 i21 i21" "i19 i19 i20 i20 i21 i21" "i19 i19 i20 i20 i21 i21" ; } /* Shuridisk (1 image, 1 vidéo) */ #grid-shuridisk > a:nth-child(1) { grid-area: i1; } #grid-shuridisk > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-shuridisk > div:nth-child(2) { grid-area: v1; height: auto; width: 100%; object-fit:fill; } #grid-shuridisk { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "v1 v1 v1 v1 v1 v1" "v1 v1 v1 v1 v1 v1" "v1 v1 v1 v1 v1 v1" "v1 v1 v1 v1 v1 v1" ; } /* Blindtest (12 images, 1 picto) */ #grid-blindtest > a:nth-child(1) { grid-area: i1 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(1) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(2) { grid-area: i2 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(2) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(3) { grid-area: i3 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(3) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(4) { grid-area: i4 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(4) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(5) { grid-area: i5 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(5) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(6) { grid-area: i6 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(6) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(7) { grid-area: i7 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(7) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(8) { grid-area: i8 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(8) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(9) { grid-area: i9 ; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(9) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(10) { grid-area: i10; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(10) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(11) { grid-area: i11; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(11) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(12) { grid-area: i12; width: 100%; height: 100%; } #grid-blindtest > a:nth-child(12) > img { width: 100%; height: 100%; object-fit:fill; } #grid-blindtest > a:nth-child(13) { grid-area: i13; width: 33% ; height: auto; object-fit:fill; justify-self:end; } #grid-blindtest { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i4 i4 i5 i5 i6 i6" "i4 i4 i5 i5 i6 i6" "i7 i7 i8 i8 i9 i9" "i7 i7 i8 i8 i9 i9" "i10 i10 i11 i11 i12 i12" "i10 i10 i11 i11 i12 i12" "i13 i13 i13 i13 i13 i13" "i13 i13 i13 i13 i13 i13" ; } /* Accroche (9 images) */ #grid-accroche > a:nth-child(1) { grid-area: i1; } #grid-accroche > a:nth-child(1) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(2) { grid-area: i2; } #grid-accroche > a:nth-child(2) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(3) { grid-area: i3; } #grid-accroche > a:nth-child(3) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(4) { grid-area: i4; } #grid-accroche > a:nth-child(4) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(5) { grid-area: i5; } #grid-accroche > a:nth-child(5) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(6) { grid-area: i6; } #grid-accroche > a:nth-child(6) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(7) { grid-area: i7; } #grid-accroche > a:nth-child(7) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(8) { grid-area: i8; } #grid-accroche > a:nth-child(8) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche > a:nth-child(9) { grid-area: i9; } #grid-accroche > a:nth-child(9) > img { height: auto; width: 100%; object-fit:fill; } #grid-accroche { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i4 i4 i5 i5 i6 i6" "i4 i4 i5 i5 i6 i6" "i4 i4 i5 i5 i6 i6" "i4 i4 i5 i5 i6 i6" "i7 i7 i8 i8 i9 i9" "i7 i7 i8 i8 i9 i9" "i7 i7 i8 i8 i9 i9" "i7 i7 i8 i8 i9 i9" ; } /* Sekkaya (5 images) */ #grid-sekkaya > a:nth-child(1) { grid-area: i1; width: 100%; height: 100%; display: flex; flex-flow: row-reverse; } #grid-sekkaya > a:nth-child(1) > img { width: 66%; height: inherit; object-fit: fill; } #grid-sekkaya > a:nth-child(2) { grid-area: i2; width: 100%; height: 100%; } #grid-sekkaya > a:nth-child(2) > img { width: inherit; height: inherit; object-fit: fill; } #grid-sekkaya > a:nth-child(3) { grid-area: i3; width: 100%; height: 100%; } #grid-sekkaya > a:nth-child(3) > img { width: inherit; height: inherit; object-fit: fill; } #grid-sekkaya > a:nth-child(4) { grid-area: i4; width: 100%; height: 100%; } #grid-sekkaya > a:nth-child(4) > img { width: inherit; height: inherit; object-fit: fill; } #grid-sekkaya > a:nth-child(5) { grid-area: i5; width: 100%; height: 100%; } #grid-sekkaya > a:nth-child(5) > img { width: inherit; height: inherit; object-fit: fill; } #grid-sekkaya { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i3 i3 i4 i4" "i2 i2 i3 i3 i4 i4" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" ; } /* Sencre (5 images) */ #grid-sencre > a:nth-child(1) { grid-area: i1; width:100%; height:100%; } #grid-sencre > a:nth-child(1) > img { height: inherit; width: inherit; object-fit:fill; } #grid-sencre > a:nth-child(2) { grid-area: i2; width:100%; height:100%; } #grid-sencre > a:nth-child(2) > img { height: inherit; width: inherit; object-fit:fill; } #grid-sencre > a:nth-child(3) { grid-area: i3; width:100%; height:100%; } #grid-sencre > a:nth-child(3) > img { height: inherit; width: inherit; object-fit:fill; } #grid-sencre > a:nth-child(4) { grid-area: i4; width:100%; height:100%; } #grid-sencre > a:nth-child(4) > img { height: inherit; width: inherit; object-fit:fill; } #grid-sencre > a:nth-child(5) { grid-area: i5; width:100%; height:100%; } #grid-sencre > a:nth-child(5) > img { height: inherit; width: inherit; object-fit:fill; } #grid-sencre { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i2 i2 i2 i2" "i2 i2 i2 i2 i2 i2" "i2 i2 i2 i2 i2 i2" "i2 i2 i2 i2 i2 i2" "i3 i3 i3 i3 i3 i3" "i3 i3 i3 i3 i3 i3" "i3 i3 i3 i3 i3 i3" "i3 i3 i3 i3 i3 i3" "i4 i4 i4 i4 i4 i4" "i4 i4 i4 i4 i4 i4" "i4 i4 i4 i4 i4 i4" "i4 i4 i4 i4 i4 i4" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" ; } /* Affiches (12 images) */ #grid-affiches > a:nth-child(1) { grid-area: i1 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(1) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(2) { grid-area: i2 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(2) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(3) { grid-area: i3 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(3) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(4) { grid-area: i4 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(4) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(5) { grid-area: i5 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(5) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(6) { grid-area: i6 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(6) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(7) { grid-area: i7 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(7) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(8) { grid-area: i8 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(8) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(9) { grid-area: i9 ; width: 100%; height: 100%; } #grid-affiches > a:nth-child(9) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(10) { grid-area: i10; width: 100%; height: 100%; } #grid-affiches > a:nth-child(10) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(11) { grid-area: i11; width: 100%; height: 100%; } #grid-affiches > a:nth-child(11) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches > a:nth-child(12) { grid-area: i12; width: 100%; height: 100%; } #grid-affiches > a:nth-child(12) > img { height: inherit; width: inherit; object-fit: fill; } #grid-affiches { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i9 i9 i9 i10 i10 i10" "i9 i9 i9 i10 i10 i10" "i9 i9 i9 i10 i10 i10" "i9 i9 i9 i10 i10 i10" "i9 i9 i9 i10 i10 i10" "i9 i9 i9 i10 i10 i10" "i11 i11 i11 i12 i12 i12" "i11 i11 i11 i12 i12 i12" "i11 i11 i11 i12 i12 i12" "i11 i11 i11 i12 i12 i12" "i11 i11 i11 i12 i12 i12" "i11 i11 i11 i12 i12 i12" ; } /* W2C (1 vidéo) */ #grid-w2c > div:nth-child(1) { grid-area: v1; width: 100%; height: auto; object-fit:fill; } #grid-w2c { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "v1 v1 v1 v1 v1 v1" "v1 v1 v1 v1 v1 v1" "v1 v1 v1 v1 v1 v1" "v1 v1 v1 v1 v1 v1" ; } /* Botanika (9 images, 3 vidéos) */ #grid-botanika > a:nth-child(1) { grid-area: i1; width: 100%; height: 100%; } #grid-botanika > a:nth-child(1) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(2) { grid-area: i2; width: 100%; height: 100%; } #grid-botanika > a:nth-child(2) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(3) { grid-area: i3; width: 100%; height: 100%; } #grid-botanika > a:nth-child(3) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(4) { grid-area: i4; width: 100%; height: 100%; } #grid-botanika > a:nth-child(4) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(5) { grid-area: i5; width: 100%; height: 100%; } #grid-botanika > a:nth-child(5) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(6) { grid-area: i6; width: 100%; height: 100%; } #grid-botanika > a:nth-child(6) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(7) { grid-area: i7; width: 100%; height: 100%; } #grid-botanika > a:nth-child(7) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(8) { grid-area: i8; width: 100%; height: 100%; } #grid-botanika > a:nth-child(8) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > a:nth-child(9) { grid-area: i9; width: 100%; height: 100%; } #grid-botanika > a:nth-child(9) > img { height: inherit; width: inherit; object-fit: fill; } #grid-botanika > div:nth-child(10) { grid-area: v1; width: 100%; height: 100%; object-fit: fill; } #grid-botanika > div:nth-child(11) { grid-area: v2; width: 100%; height: auto; object-fit: fill; } #grid-botanika > div:nth-child(12) { grid-area: v3; width: 100%; height: auto; object-fit: fill; } #grid-botanika { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i4 i4 i5 i5 i6 i6" "i4 i4 i5 i5 i6 i6" "i7 i7 i8 i8 i9 i9" "i7 i7 i8 i8 i9 i9" "v1 v1 v2 v2 v3 v3" "v1 v1 v2 v2 v3 v3" ; } /* Lille Immo (2 images) */ #grid-lille-immo > a:nth-child(1) { grid-area: i1; width:100%; height:100%; } #grid-lille-immo > a:nth-child(1) > img { height: inherit; width: inherit; object-fit:fill; } #grid-lille-immo > a:nth-child(2) { grid-area: i2; width:100%; height:100%; display: flex; flex-flow: row-reverse;} #grid-lille-immo > a:nth-child(2) > img { height: inherit; width: 50%; object-fit:fill; } #grid-lille-immo { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1 i1 i1" "i2 i2 i2 i2 i2 i2 i2 i2" "i2 i2 i2 i2 i2 i2 i2 i2" "i2 i2 i2 i2 i2 i2 i2 i2" ; } /* Minoi (9 images) */ #grid-minoi > a:nth-child(1) { grid-area: i1; width:100%; height:100%; } #grid-minoi > a:nth-child(1) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(2) { grid-area: i2; width:100%; height:100%; } #grid-minoi > a:nth-child(2) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(3) { grid-area: i3; width:100%; height:100%; } #grid-minoi > a:nth-child(3) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(4) { grid-area: i4; width:100%; height:100%; } #grid-minoi > a:nth-child(4) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(5) { grid-area: i5; width:100%; height:100%; } #grid-minoi > a:nth-child(5) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(6) { grid-area: i6; width:100%; height:100%; } #grid-minoi > a:nth-child(6) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(7) { grid-area: i7; width:100%; height:100%; } #grid-minoi > a:nth-child(7) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(8) { grid-area: i8; width:100%; height:100%; } #grid-minoi > a:nth-child(8) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi > a:nth-child(9) { grid-area: i9; width:100%; height:100%; } #grid-minoi > a:nth-child(9) > img { height: inherit; width: inherit; object-fit:fill; } #grid-minoi { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i2 i2 i3 i3" "i1 i1 i2 i2 i3 i3" "i4 i4 i5 i5 i6 i6" "i4 i4 i5 i5 i6 i6" "x x i7 i7 i8 i8" "x x i7 i7 i8 i8" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" ; } /* Destruction (12 images) */ #grid-destruction > a:nth-child(1) { grid-area: i1; width:100%; height:100%; } #grid-destruction > a:nth-child(1) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(2) { grid-area: i2; width:100%; height:100%; } #grid-destruction > a:nth-child(2) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(3) { grid-area: i3; width:100%; height:100%; } #grid-destruction > a:nth-child(3) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(4) { grid-area: i4; width:100%; height:100%; } #grid-destruction > a:nth-child(4) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(5) { grid-area: i5; width:100%; height:100%; } #grid-destruction > a:nth-child(5) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(6) { grid-area: i6; width:100%; height:100%; } #grid-destruction > a:nth-child(6) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(7) { grid-area: i7; width:100%; height:100%; } #grid-destruction > a:nth-child(7) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(8) { grid-area: i8; width:100%; height:100%; } #grid-destruction > a:nth-child(8) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(9) { grid-area: i9; width:100%; height:100%; } #grid-destruction > a:nth-child(9) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(10) { grid-area: i10; width:100%; height:100%; } #grid-destruction > a:nth-child(10) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(11) { grid-area: i11; width:100%; height:100%; } #grid-destruction > a:nth-child(11) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction > a:nth-child(12) { grid-area: i12; width:100%; height:100%; } #grid-destruction > a:nth-child(12) > img { height: inherit; width: inherit; object-fit:fill; } #grid-destruction { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i3 i3 i4 i4" "i2 i2 i3 i3 i4 i4" "i5 i5 i6 i6 x x " "i5 i5 i6 i6 x x " "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" "i10 i10 i11 i11 y y " "i10 i10 i11 i11 y y " "i12 i12 i12 i12 i12 i12" "i12 i12 i12 i12 i12 i12" "i12 i12 i12 i12 i12 i12" "i12 i12 i12 i12 i12 i12" ; } /* MCA (8 images) */ #grid-mca > a:nth-child(1) { grid-area: i1; width: 100%; height: 100%; } #grid-mca > a:nth-child(1) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(2) { grid-area: i2; width: 100%; height: 100%; } #grid-mca > a:nth-child(2) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(3) { grid-area: i3; width: 100%; height: 100%; } #grid-mca > a:nth-child(3) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(4) { grid-area: i4; width: 100%; height: 100%; } #grid-mca > a:nth-child(4) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(5) { grid-area: i5; width: 100%; height: 100%; } #grid-mca > a:nth-child(5) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(6) { grid-area: i6; width: 100%; height: 100%; } #grid-mca > a:nth-child(6) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(7) { grid-area: i7; width: 100%; height: 100%; } #grid-mca > a:nth-child(7) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca > a:nth-child(8) { grid-area: i8; width: 100%; height: 100%; } #grid-mca > a:nth-child(8) > img { height: inherit; width: inherit; object-fit:fill; } #grid-mca { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i3 i3 i4 i4" "i2 i2 i3 i3 i4 i4" "i2 i2 i3 i3 i4 i4" "i5 i5 i6 i6 i7 i7" "i5 i5 i6 i6 i7 i7" "i5 i5 i6 i6 i7 i7" "i8 i8 i8 i8 i8 i8" "i8 i8 i8 i8 i8 i8" "i8 i8 i8 i8 i8 i8" "i8 i8 i8 i8 i8 i8" ; } /* ONIT (6 images) */ #grid-onit > a:nth-child(1) { grid-area: i1; width: 100%; height: 100%; } #grid-onit > a:nth-child(1) > img { width: inherit; height: inherit; object-fit: fill; } #grid-onit > a:nth-child(2) { grid-area: i2; width: 100%; height: 100%; } #grid-onit > a:nth-child(2) > img { width: inherit; height: inherit; object-fit: fill; } #grid-onit > a:nth-child(3) { grid-area: i3; width: 100%; height: 100%; } #grid-onit > a:nth-child(3) > img { width: inherit; height: inherit; object-fit: fill; } #grid-onit > a:nth-child(4) { grid-area: i4; width: 100%; height: 100%; } #grid-onit > a:nth-child(4) > img { width: inherit; height: inherit; object-fit: fill; } #grid-onit > a:nth-child(5) { grid-area: i5; width: 100%; height: 100%; } #grid-onit > a:nth-child(5) > img { width: inherit; height: inherit; object-fit: fill; } #grid-onit > a:nth-child(6) { grid-area: i6; width: 100%; height: 100%; } #grid-onit > a:nth-child(6) > img { width: inherit; height: inherit; object-fit: fill; } #grid-onit { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i1 i1 i1 i2 i2 i2" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i3 i3 i3 i4 i4 i4" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" ; } /* BAD (7 images) */ #grid-bad > a:nth-child(1) { grid-area: i1; width: 100%; height:100%; } #grid-bad > a:nth-child(1) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad > a:nth-child(2) { grid-area: i2; width: 100%; height:100%; } #grid-bad > a:nth-child(2) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad > a:nth-child(3) { grid-area: i3; width: 100%; height:100%; } #grid-bad > a:nth-child(3) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad > a:nth-child(4) { grid-area: i4; width: 100%; height:100%; } #grid-bad > a:nth-child(4) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad > a:nth-child(5) { grid-area: i5; width: 100%; height:100%; } #grid-bad > a:nth-child(5) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad > a:nth-child(6) { grid-area: i6; width: 100%; height:100%; } #grid-bad > a:nth-child(6) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad > a:nth-child(7) { grid-area: i7; width: 100%; height:100%; } #grid-bad > a:nth-child(7) > img { width: inherit; height: inherit; object-fit:fill; } #grid-bad { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i3 i3 i4 i4" "i2 i2 i3 i3 i4 i4" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" "i5 i5 i5 i5 i5 i5" "i6 i6 i6 i7 i7 i7" "i6 i6 i6 i7 i7 i7" "i6 i6 i6 i7 i7 i7" "i6 i6 i6 i7 i7 i7" ; } /* SNCF (6 vidéos) */ #grid-sncf > div:nth-child(1) { grid-area: v1; width: 100%; height: auto; object-fit: fill; } #grid-sncf > div:nth-child(2) { grid-area: v2; width: 100%; height: auto; object-fit: fill; } #grid-sncf > div:nth-child(3) { grid-area: v3; width: 100%; height: auto; object-fit: fill; } #grid-sncf > div:nth-child(4) { grid-area: v4; width: 100%; height: auto; object-fit: fill; } #grid-sncf > div:nth-child(5) { grid-area: v5; width: 100%; height: auto; object-fit: fill; } #grid-sncf > div:nth-child(6) { grid-area: v6; width: 100%; height: auto; object-fit: fill; } #grid-sncf { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "v1 v1 v2 v2 v3 v3" "v1 v1 v2 v2 v3 v3" "v1 v1 v2 v2 v3 v3" "v1 v1 v2 v2 v3 v3" "v4 v4 v5 v5 v6 v6" "v4 v4 v5 v5 v6 v6" "v4 v4 v5 v5 v6 v6" "v4 v4 v5 v5 v6 v6" ; } /* Chevo (9 images) */ #grid-chevo > a:nth-child(1) { grid-area: i1; width: 100%; height: 100%; } #grid-chevo > a:nth-child(1) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(2) { grid-area: i2; width: 100%; height: 100%; } #grid-chevo > a:nth-child(2) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(3) { grid-area: i3; width: 100%; height: 100%; } #grid-chevo > a:nth-child(3) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(4) { grid-area: i4; width: 100%; height: 100%; } #grid-chevo > a:nth-child(4) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(5) { grid-area: i5; width: 100%; height: 100%; } #grid-chevo > a:nth-child(5) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(6) { grid-area: i6; width: 100%; height: 100%; } #grid-chevo > a:nth-child(6) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(7) { grid-area: i7; width: 100%; height: 100%; } #grid-chevo > a:nth-child(7) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(8) { grid-area: i8; width: 100%; height: 100%; } #grid-chevo > a:nth-child(8) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo > a:nth-child(9) { grid-area: i9; width: 100%; height: 100%; } #grid-chevo > a:nth-child(9) > img { width: inherit; height: inherit; object-fit:fill; } #grid-chevo { display: grid; grid-gap: 1rem; justify-items: center; align-items: center; grid-template-areas: "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i1 i1 i1 i1 i1 i1" "i2 i2 i3 i3 i4 i4" "i2 i2 i3 i3 i4 i4" "i5 i5 i5 i6 i6 i6" "i5 i5 i5 i6 i6 i6" "i7 i7 i7 i8 i8 i8" "i7 i7 i7 i8 i8 i8" "i9 i9 i9 i9 i9 i9" "i9 i9 i9 i9 i9 i9" ; }