/* General Style */
.boX { display: flex; flex-direction: row; width: 100%; }
.picX { width: 20%; background:Honeydew; }
.txtX { width: 80%; background:Honeydew; }
/* ===================== GRID ========================== */
.conAnt {
    display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: auto auto auto auto;
	gap: 5px 5px;

    grid-template-areas: 
"P01 A02"
"P03 A04"
"P05 A06" 
"P07 A08"
}
.pict01 { grid-area: P01; }
.text02 { grid-area: A02; }
.pict03 { grid-area: P03; }
.text04 { grid-area: A04; }
.pict05 { grid-area: P05; }
.text06 { grid-area: A06; }
.pict07 { grid-area: P07; }
.text08 { grid-area: A08; }

@media (max-width: 768px) {
.conAnt {
    display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto auto auto auto auto;
	gap: 5px 5px;

    grid-template-areas: 
"P01"
"A02"
"P03"
"A04"
"P05"
"A06"
"P07"
"A08"
}
}
/* ===================== END GRID ========================== */
.conTV {
    display: grid;
	grid-template-columns: 10% 40% 10% 40%;
	grid-template-rows: auto auto auto auto auto;
	gap: 2px 5px;

	align-items: start;

	grid-template-areas: 
"D01 T02 D03 T04"
"D05 T06 D07 T08"
"D09 T10 D11 T12"
"D13 T14 D15 T16"
"D17 T18 D19 T20"
"D21 T22 D23 T24"
"D25 T26 D27 T28"
"D29 T30 D31 T32"
"D33 T34 D35 T36"
"D37 T38 D39 T40";
}
.pic01 { grid-area: D01; }
.txt02 { grid-area: T02; }
.pic03 { grid-area: D03; }
.txt04 { grid-area: T04; }
.pic05 { grid-area: D05; }
.txt06 { grid-area: T06; }
.pic07 { grid-area: D07; }
.txt08 { grid-area: T08; }
.pic09 { grid-area: D09; }
.txt10 { grid-area: T10; }
.pic11 { grid-area: D11; }
.txt12 { grid-area: T12; }
.pic13 { grid-area: D13; }
.txt14 { grid-area: T14; }
.pic15 { grid-area: D15; }
.txt16 { grid-area: T16; }
.pic17 { grid-area: D17; }
.txt18 { grid-area: T18; }
.pic19 { grid-area: D19; }
.txt20 { grid-area: T20; }
.pic21 { grid-area: D21; }
.txt22 { grid-area: T22; }
.pic23 { grid-area: D23; }
.txt24 { grid-area: T24; }
.pic25 { grid-area: D25; }
.txt26 { grid-area: T26; }
.pic27 { grid-area: D27; }
.txt28 { grid-area: T28; }
.pic29 { grid-area: D29; }
.txt30 { grid-area: T30; }
.pic31 { grid-area: D31; }
.txt32 { grid-area: T32; }
.pic33 { grid-area: D33; }
.txt34 { grid-area: T34; }
.pic35 { grid-area: D35; }
.txt36 { grid-area: T36; }
.pic37 { grid-area: D37; }
.txt38 { grid-area: T38; }
.pic39 { grid-area: D39; }
.txt40 { grid-area: T40; }

@media (max-width: 768px) {
.conTV {
    display: grid;
	grid-template-columns: 20% 80%;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
	gap: 2px 5px;
	align-items: start;

	grid-template-areas: 
"D01 T02"
"D03 T04"
"D05 T06"
"D07 T08"
"D09 T10"
"D11 T12"
"D13 T14"
"D15 T16"
"D17 T18"
"D19 T20"
"D21 T22"
"D23 T24"
"D25 T26"
"D27 T28"
"D29 T30"
"D31 T32"
"D33 T34"
"D35 T36"
"D37 T38"
"D39 T40";
}
}
/* ===================== END GRID 2 ======================== */
hr {
  background: linear-gradient(to right, blue, magenta);
  height: 5px;
}