:root{
	--grid-cell: 3vw;
	--card-grid-size-v: span 6 / span 4;
	--card-grid-size-h: span 4 / span 6;
}
.formation.f_1{
	grid-template-columns: repeat(26, var(--grid-cell));
    grid-template-rows: repeat(27,  var(--grid-cell));
}

.formation.f_2{
	grid-template-columns: repeat(26, var(--grid-cell));
    grid-template-rows: repeat(35,  var(--grid-cell));
}

.formation.f_3{
	grid-template-columns: repeat(26, var(--grid-cell));
    grid-template-rows: repeat(45,  var(--grid-cell));
}

.formation.f_4{
	grid-template-columns: repeat(26, var(--grid-cell));
    grid-template-rows: repeat(31,  var(--grid-cell));
}

.formation.f_5{
	grid-template-columns: repeat(27, var(--grid-cell));
    grid-template-rows: repeat(25,  var(--grid-cell));
}

.formation.f_6{
	grid-template-columns: repeat(28, var(--grid-cell));
    grid-template-rows: repeat(40, var(--grid-cell));
}

.place.vert {
/*    background: red;*/
/*    border: 1px solid black;*/
}

.place.vert#f_1_0 {
    grid-area: 2 / 10 / span 6 / span 4;
}
.place.vert#f_1_1 {
    grid-area: 2 / 16 / span 6 / span 4;
}
.place.vert#f_1_2 {
    grid-area: 4 / 21 / span 6 / span 4;
}
.place.vert#f_1_3 {
    grid-area: 11 / 2 / span 6 / span 4;
}
.place.vert#f_1_4 {
    grid-area: 18 / 4 / span 6 / span 4;
}

.place.hor#f_1_5 {
    grid-area: 6 / 3 / span 4 / span 6;
}

.place.hor#f_1_6 {
    grid-area: 9 / 12 / span 4 / span 6;
}

.place.hor#f_1_7 {
    grid-area: 14 / 9 / span 4 / span 6;
}
.place.hor#f_1_8 {
    grid-area: 21 / 9 / span 4 / span 6;
}

/*eifel tower*/

.place.vert#f_2_0 {
    grid-area: 3 / 12 / var(--card-grid-size-v);
}

.place.vert#f_2_1 {
    grid-area: 12 / 12 / var(--card-grid-size-v);
}

.place.vert#f_2_2 {
    grid-area: 20 / 8 / var(--card-grid-size-v);
}

.place.vert#f_2_3 {
    grid-area: 20 / 16 / var(--card-grid-size-v);
}

.place.hor#f_2_4 {
    grid-area: 28 / 5 / var(--card-grid-size-h);
}

.place.hor#f_2_5 {
    grid-area: 28 / 17 / var(--card-grid-size-h);
}

/*baguette*/

.place.vert#f_3_0 {
    grid-area: 3 / 12 / var(--card-grid-size-v);
}

.place.vert#f_3_1 {
    grid-area: 36 / 12 / var(--card-grid-size-v);
}

.place.hor#f_3_2 {
    grid-area: 12 / 11 / var(--card-grid-size-h);
}

.place.hor#f_3_3 {
    grid-area: 20 / 11 / var(--card-grid-size-h);
}

.place.hor#f_3_4 {
    grid-area: 28 / 11 / var(--card-grid-size-h);
}

/*Arc de Triomphe*/


.place.vert#f_4_0 {
    grid-area: 1 / 12 / var(--card-grid-size-v);
}

.place.vert#f_4_1 {
    grid-area: 4 / 6 / var(--card-grid-size-v);
}

.place.vert#f_4_2 {
    grid-area: 4 / 18 / var(--card-grid-size-v);
}

.place.vert#f_4_3 {
    grid-area: 12 / 3 / var(--card-grid-size-v);
}

.place.vert#f_4_4 {
    grid-area: 12 / 21 / var(--card-grid-size-v);
}

.place.vert#f_4_7{
    grid-area: 25 / 12 / var(--card-grid-size-v);
}

.place.hor#f_4_5 {
    grid-area: 20 / 3 / var(--card-grid-size-h);
}

.place.hor#f_4_6 {
    grid-area: 20 / 19 / var(--card-grid-size-h);
}



/*Street Lamp*/

.place.vert#f_5_0 {
    grid-area: 1 / 12 / var(--card-grid-size-v);
}

.place.vert#f_5_1 {
    grid-area: 4 / 7 / var(--card-grid-size-v);
}

.place.vert#f_5_2 {
    grid-area: 4 / 17 / var(--card-grid-size-v);
}

.place.vert#f_5_3 {
    grid-area: 8 / 12 / var(--card-grid-size-v);
}

.place.vert#f_5_4 {
    grid-area: 14 / 2 / var(--card-grid-size-v);
}

.place.vert#f_5_5 {
    grid-area: 14 / 22 / var(--card-grid-size-v);
}

.place.vert#f_5_6 {
    grid-area: 20 / 12 / var(--card-grid-size-v);
}

.place.hor#f_5_7 {
    grid-area: 15 / 7 / var(--card-grid-size-h);
}

.place.hor#f_5_8 {
    grid-area: 15 / 15 / var(--card-grid-size-h);
}

/*Moulin Rouge*/


.place.vert#f_6_0 {
    grid-area: 2 / 4 / var(--card-grid-size-v);
}

.place.vert#f_6_1 {
    grid-area: 2 / 22 / var(--card-grid-size-v);
}

.place.vert#f_6_2 {
    grid-area: 7 / 9 / var(--card-grid-size-v);
}

.place.vert#f_6_3 {
    grid-area: 7 / 17 / var(--card-grid-size-v);
}

.place.vert#f_6_4 {
    grid-area: 14 / 13 / var(--card-grid-size-v);
}

.place.vert#f_6_5 {
    grid-area: 21 / 9 / var(--card-grid-size-v);
}


.place.vert#f_6_6 {
    grid-area: 21 / 17 / var(--card-grid-size-v);
}

.place.vert#f_6_7 {
    grid-area: 27 / 4 / var(--card-grid-size-v);
}

.place.vert#f_6_8 {
    grid-area: 27 / 22 / var(--card-grid-size-v);
}

.place.vert#f_6_9 {
    grid-area: 34 / 8 / var(--card-grid-size-v);
}
.place.vert#f_6_10 {
    grid-area: 34 / 13 / var(--card-grid-size-v);
}
.place.vert#f_6_11 {
    grid-area: 34 / 18 / var(--card-grid-size-v);
}

/* Individual positioning for horizontal elements */
.place.hor#some_id {
    grid-area: 5 / 3 / span 4 / span 6;
}