@media all and (orientation: landscape) {
    .fdl {
        display: grid;
        grid-template-columns: repeat(4, 0.25fr);
        grid-template-rows: repeat(6, 0.5fr);
        column-gap: 36pt;
    }
    .fdl_img {
        border-radius: 12pt;
        filter: drop-shadow(0pt 0pt 6pt rgba(0,0,0,0.5));
        /* background-size:cover; */
        width: 100%;
    }
    .fdl_text_box {
        font-size: 18pt;
        font-weight: bold;
        padding: 6pt;
        background-color: #fff;
        /*704214*/
        /* box-shadow: inset 0pt 0pt 8pt rgba(112, 66, 20, 0.75); */
    }
    .s0 {
        grid-column: 1;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .s1 {
        grid-column: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .p0 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row: 1;
        margin-bottom: 36pt;
    }
    .s2 {
        grid-column: 3;
        grid-row-start: 2;
        grid-row-end: 4;
    }
    .s3 {
        grid-column: 4;
        grid-row-start: 2;
        grid-row-end: 4;
    }
    .p1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 3;
        margin-top: 36pt;
        margin-bottom: 36pt;
    }
    .s4 {
        grid-column: 1;
        grid-row-start: 4;
        grid-row-end: 6;
    }
    .s5 {
        grid-column: 2;
        grid-row-start: 4;
        grid-row-end: 6;
    }
    .p2 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 4;
        grid-row-end: 5;
        margin-top: 36pt;
        margin-bottom: 36pt;
    }
    .s6 {
        grid-column: 3;
        grid-row-start: 5;
        grid-row-end: 7;
    }
    .s7 {
        grid-column: 4;
        grid-row-start: 5;
        grid-row-end: 7;
    }
    .p3 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 6;
        grid-row-end: 7;
        margin-top: 36pt;
        margin-bottom: 36pt;
    }
    .s8 {
        grid-column: 1;
        grid-row-start: 7;
        grid-row-end: 9;
    }
    .s9 {
        grid-column: 2;
        grid-row-start: 7;
        grid-row-end: 9;
    }
    .p4 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 7;
        grid-row-end: 9;
        margin-top: 36pt;
    }
}

@media all and (orientation: portrait) {
    .fdl {
        display: grid;
        grid-template-columns: repeat(2, 0.5fr);
        column-gap: 12pt;
        row-gap:12pt;
    }
    .fdl_img {
        border-radius: 12pt;
        filter: drop-shadow(0pt 0pt 6pt rgba(0,0,0,0.5));
        width: 100%;
    }
    .fdl_text_box {
        font-size: 18pt;
        font-weight: bold;
        padding: 6pt;
        background-color: #fff;
        box-shadow: 0pt 0pt 8px rgba(0, 0, 0, 0.75);
    }
    .p0 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 1;
        /* margin-bottom: 12pt; */
    }
    .s0 {
        grid-column: 1;
        grid-row: 2;
    }
    .s1 {
        grid-column: 2;
        grid-row: 2;
    }
    .p1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 3;
    }
    .s2 {
        grid-column: 1;
        grid-row: 4;
    }
    .s3 {
        grid-column: 2;
        grid-row: 4;
    }
    .p2 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 5;
    }
    .s4 {
        grid-column: 1;
        grid-row: 6;
    }
    .s5 {
        grid-column: 2;
        grid-row: 6;
    }
    .p3 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 7;
    }
    .s6 {
        grid-column: 1;
        grid-row: 8;
    }
    .s7 {
        grid-column: 2;
        grid-row: 8;
    }
    .p4 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 9;
    }
    .s8 {
        grid-column: 1;
        grid-row: 10;
    }
    .s9 {
        grid-column: 2;
        grid-row: 10;
    }
}