@import "_common.css";
@import "_menu.css";
@import "_back_to_top.css";

@media (min-width: 481px) {
    :root {
        --margin-top: 40px
    }

    #mnp-bd {
        grid-template-rows: 1.3fr 0.7fr;
        margin-top: 244px;
    }
    #mnp-bd h1 {
        grid-column: 1/6;
        grid-row: 1;
        align-self: end;
        margin: 0;
    }
    #mnp-bd span {
        grid-column: 3/6;
        grid-row: 2;
        align-self: end;
    }
    #mnp-bd img {
        grid-column: 6/12;
        grid-row: 1/3;
    }
    #mnp-bd div {
        grid-column: 13;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #mnp-bd hr {
        grid-column: 3/13;
        grid-row: 3;
    }

    #bresson {
        grid-template-rows: auto 1fr;
        margin-top: var(--margin-top);
    }
    #bresson img:first-of-type {
        grid-column: 1/6;
        grid-row: 1/3;
    }
    #bresson img:last-of-type {
        grid-column: 6/10;
        grid-row: 1;
    }
    #bresson span {
        grid-column: 13/10;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #bresson hr:first-of-type {
        grid-column: 6/13;
        grid-row: 2;
    }
    #bresson hr:last-of-type {
        grid-column: 1/6;
        grid-row: 4;
    }

    #depardon {
        grid-template-rows: auto auto 1fr;
        margin-top: var(--margin-top);
    }
    #depardon img:first-of-type {
        grid-column: 2/6;
        grid-row: 1;
    }
    #depardon img:last-of-type {
        grid-column: 6/12;
        grid-row: 1/4;
    }
    #depardon span {
        grid-column: 2/5;
        grid-row: 3;
        align-self: end;
    }
    #depardon hr:first-of-type {
        grid-column: 2/6;
        grid-row: 2;
    }
    #depardon hr:last-of-type {
        grid-column: 2/12;
        grid-row: 4;
    }

    #frizot-vegy {
        grid-template-rows: auto 1fr;
        margin-top: var(--margin-top);
    }
    #frizot-vegy img:first-of-type {
        grid-column: 1/8;
        grid-row: 1/4;
    }
    #frizot-vegy img:last-of-type {
        grid-column: 8/12;
        grid-row: 1;
    }
    #frizot-vegy span {
        grid-column: 12/9;
        grid-row: 3;
        align-self: end;
        text-align: right;
    }
    #frizot-vegy hr:first-of-type {
        grid-column: 8/12;
        grid-row: 2;
    }
    #frizot-vegy hr:last-of-type {
        grid-column: 1/12;
        grid-row: 4;
    }

    #rheims {
        grid-template-rows: auto auto 1fr;
        margin-top: var(--margin-top);
    }
    #rheims img:last-of-type {
        grid-column: 2/8;
        grid-row: 1/4;
    }
    #rheims img:first-of-type {
        grid-column: 8/12;
        grid-row: 1;
    }
    #rheims span:first-of-type {
        grid-column: 13/10;
        grid-row: 3;
        text-align: right;
    }
    #rheims span:last-of-type {
        grid-column: 2/8;
        grid-row: 5;
    }
    #rheims hr:first-of-type {
        grid-column: 8/13;
        grid-row: 2;
    }
    #rheims hr:last-of-type {
        grid-column: 2/8;
    }

    #ingres-koons {
        margin-top: 20px;
    }
    #ingres-koons span {
        grid-column: 2/5;
        grid-row: 1;
        align-self: end;
    }
    #ingres-koons img {
        grid-column: 6/13;
    }
    #ingres-koons hr {
        grid-column: 2/13;
        grid-row: 2;
    }

    #bresson-cuesta {
        grid-template-rows: auto auto 1fr;
        margin-top: var(--margin-top);
    }
    #bresson-cuesta img:first-of-type {
        grid-column: 2/6;
        grid-row: 1/4;
    }
    #bresson-cuesta img:last-of-type {
        grid-column: 6/11;
        grid-row: 1;
    }
    #bresson-cuesta span {
        grid-column: 13/9;
        grid-row: 3;
        text-align: right;
    }
    #bresson-cuesta hr:first-of-type {
        grid-column: 6/13;
        grid-row: 2;
    }
    #bresson-cuesta hr:last-of-type {
        grid-column: 2/6;
        grid-row: 4;
    }

    #cuesta-1 {
        grid-template-rows: 1fr auto;
        margin-top: var(--margin-top);
    }
    #cuesta-1 img:first-of-type {
        grid-column: 2/7;
        grid-row: 1/3;
    }
    #cuesta-1 img:last-of-type {
        grid-column: 7/11;
        grid-row: 2;
        align-self: end;
    }
    #cuesta-1 hr:first-of-type {
        grid-column: 7/11;
        grid-row: 1;
        align-self: end;
    }
    #cuesta-1 hr:last-of-type {
        grid-column: 2/7;
    }

    #cuesta-2 {
        grid-template-rows: auto auto 1fr;
    }
    #cuesta-2 img:first-of-type {
        grid-column: 3/7;
        grid-row: 1/4;
    }
    #cuesta-2 img:last-of-type {
        grid-column: 7/12;
        grid-row: 1;
    }
    #cuesta-2 span {
        grid-column: 13/10;
        grid-row: 3;
        text-align: right;
    }
    #cuesta-2 hr:first-of-type {
        grid-column: 7/13;
        grid-row: 2;
    }
    #cuesta-2 hr:last-of-type {
        grid-column: 3/7;
        grid-row: 4;
    }

    #steidl {
        margin-top: var(--margin-top);
    }
    #steidl img {
        grid-column: 1/8;
    }
    #steidl span {
        grid-column: 12/9;
        align-self: end;
        text-align: right;
    }
    #steidl hr {
        grid-column: 1/12;
        grid-row: 2;
    }

    #steidl-2 {
        grid-template-rows: auto auto auto 1fr;
    }
    #steidl-2 img:first-of-type {
        grid-column: 4/8;
        grid-row: 1;
    }
    #steidl-2 img:last-of-type {
        grid-column: 8/12;
        grid-row: 1/4;
    }
    #steidl-2 span {
        grid-column: 1/4;
        grid-row: 3;
    }
    #steidl-2 hr:first-of-type {
        grid-column: 4/8;
        grid-row: 2;
    }
    #steidl-2 hr:last-of-type {
        grid-column: 1/12;
        grid-row: 4;
    }

    #recollets {
        margin-top: var(--margin-top);
    }
    #recollets img {
        grid-column: 3/8;
    }
    #recollets span {
        grid-column: 11/8;
        align-self: end;
        text-align: right;
    }
    #recollets hr {
        grid-column: 3/11;
        grid-row: 2;
    }

    #remy {
        margin-top: var(--margin-top);
    }
    #remy span {
        grid-column: 3/6;
        grid-row: 1;
        align-self: end;
    }
    #remy img {
        grid-column: 7/12;
    }
    #remy hr {
        grid-column: 3/12;
        grid-row: 2;
    }

    #weifenbach-mesuto {
        grid-template-rows: auto auto 1fr;
    }
    #weifenbach-mesuto img:first-of-type {
        grid-column: 1/7;
        grid-row: 1/4;
    }
    #weifenbach-mesuto img:last-of-type {
        grid-column: 7/11;
        grid-row: 1;
    }
    #weifenbach-mesuto span {
        grid-column: 13/10;
        grid-row: 3;
        text-align: right;
    }
    #weifenbach-mesuto hr:first-of-type {
        grid-column: 7/13;
        grid-row: 2;
    }
    #weifenbach-mesuto hr:last-of-type {
        grid-column: 1/7;
        grid-row: 4;
    }

    #stessel-roy img:first-of-type {
        grid-column: 5/9;
    }
    #stessel-roy img:last-of-type {
        grid-column: 9/13;
    }
    #stessel-roy span {
        grid-column: 1/4;
        grid-row: 1;
        align-self: end;
    }
    #stessel-roy hr {
        grid-column: 1/13;
        grid-row: 2;
    }

    #fichard{
        grid-template-rows: auto auto auto 1fr auto auto auto;
        margin-top: var(--margin-top);
    }
    #fichard img:first-of-type {
        grid-column: 2/9;
    }
    #fichard img:nth-of-type(2) {
        grid-column: 5/9;
        grid-row: 3;
    }
    #fichard img:nth-of-type(3) {
        grid-column: 9/-1;
        grid-row: 3/5;
    }
    #fichard img:nth-of-type(4) {
        grid-column: 3/9;
        grid-row: 6;
    }
    #fichard span {
        grid-column: 12/9;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #fichard hr:first-of-type {
        grid-column: 2/12;
    }
    #fichard hr:nth-of-type(2) {
        grid-column: 5/9;
    }
    #fichard hr:nth-of-type(3) {
        grid-column: 9/-1;
    }
    #fichard hr:last-of-type {
        grid-column: 3/9;
        grid-row: -1;
    }

    #roy-alexandre {
        grid-template-rows: auto auto 1fr auto auto auto;
    }
    #roy-alexandre img:first-of-type {
        grid-column: 2/8;
        grid-row: 1;
    }
    #roy-alexandre img:nth-of-type(2) {
        grid-column: 8/12;
        grid-row: 1/4;
    }
    #roy-alexandre img:last-of-type {
        grid-column: 8/13;
        grid-row: 5;
    }
    #roy-alexandre span {
        grid-column: 1/4;
        grid-row: 3;
    }
    #roy-alexandre hr:first-of-type {
        grid-column: 1/8;
        grid-row: 2;
    }
    #roy-alexandre hr:nth-of-type(2) {
        grid-column: 8/12;
        grid-row: 4;
    }
    #roy-alexandre hr:last-of-type {
        grid-column: 8/13;
    }

    #loubier {
        margin-top: var(--margin-top);
    }
    #loubier img:first-of-type {
        grid-column: 1/6;
        grid-row: 1/5;
    }
    #loubier img:nth-of-type(2) {
        grid-column: 6/10;
        grid-row: 1;
    }
    #loubier img:last-of-type {
        grid-column: 6/10;
        grid-row: 2;
        margin-top: 10px;
    }
    #loubier span {
        grid-column: 13/10;
        grid-row: 2;
        align-self: end;
        text-align: right;
    }
    #loubier hr:first-of-type {
        grid-column: 6/13;
        grid-row: 3;
    }
    #loubier hr:last-of-type {
        grid-column: 1/6;
        grid-row: 5;
    }

    #bresson-berger {
        margin-top: var(--margin-top);
        grid-template-rows: auto auto auto 1fr auto;
    }
    #bresson-berger img {
        grid-column: 3/10;
    }
    #bresson-berger img:nth-of-type(2) {
        grid-column: 3/7;
        grid-row: 3/5;
    }
    #bresson-berger img:last-of-type {
        grid-column: 7/13;
        grid-row: 3;
    }
    #bresson-berger span {
        grid-column: 13/10;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #bresson-berger hr:first-of-type {
        grid-column: 3/13;
    }
    #bresson-berger hr:nth-of-type(2) {
        grid-column: 7/13;
        grid-row: 4;
    }
    #bresson-berger hr:last-of-type {
        grid-column: 1/7;
        grid-row: 5;
    }

    #tartier-casselle {
        margin-top: var(--margin-top);
    }
    #tartier-casselle img:first-of-type {
        grid-column: 2/7;
        align-self: end;
    }
    #tartier-casselle img:nth-of-type(2) {
        grid-column: 7/12;
        grid-row: 3;
    }
    #tartier-casselle img:last-of-type {
        grid-column: 7/11;
        grid-row: 1;
    }
    #tartier-casselle span {
        grid-column: 3/7;
        grid-row: 3;
        align-self: end;
    }
    #tartier-casselle hr:first-of-type {
        grid-column: 2/7;
        grid-row: 2;
    }
    #tartier-casselle hr:nth-of-type(2) {
        grid-column: 7/11;
        grid-row: 2;
    }
    #tartier-casselle hr:last-of-type {
        grid-column: 3/12;
        grid-row: 4;
    }

    #leveque-valloteau {
        margin-top: var(--margin-top);
        grid-template-rows: auto auto auto 1fr auto;
    }
    #leveque-valloteau img:first-of-type {
        grid-column: 1/7;
    }
    #leveque-valloteau img:nth-of-type(2) {
        grid-column: 7/11;
        grid-row: 3;
    }
    #leveque-valloteau img:last-of-type {
        grid-column: 3/7;
        grid-row: 3/5;
    }
    #leveque-valloteau span {
        grid-column: 11/7;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #leveque-valloteau hr:first-of-type {
        grid-column: 1/11;
    }
    #leveque-valloteau hr:nth-of-type(2) {
        grid-column: 7/11;
        grid-row: 4;
    }
    #leveque-valloteau hr:last-of-type {
        grid-column: 3/7;
        grid-row: 5;
    }



    #leveque-valloteau-2 hr {
        grid-column: 7/11;
        grid-row: 2;
    }

    #leveque-valloteau-2 + hr {
        grid-column: 3/7;
    }

    #bouet {
        margin-top: var(--margin-top);
    }
    #bouet img {
        grid-column: 2/7;
    }
    #bouet span {
        grid-column: 11/9;
        align-self: end;
        text-align: right;
    }
    #bouet hr {
        grid-column: 2/11;
        grid-row: 2;
    }

    #bresson-mafiol img:first-of-type {
        grid-column: 2/7;
        grid-row: 1;
        align-self: end;
    }

    #bresson-mafiol img:last-of-type {
        grid-column: 7/13;
        grid-row: 1;
    }

    #bresson-mafiol span {
        grid-column: 13/9;
        grid-row: 3;
        text-align: right;
    }

    #bresson-mafiol hr:first-of-type {
        grid-column: 1/7;
        grid-row: 2;
    }

    #bresson-mafiol hr:last-of-type {
        grid-column: 7/13;
        grid-row: 2;
    }
}

@media (max-width: 480px) {
    header nav ul li:first-of-type {
        display: none;
    }

    #mnp-bd {
        margin-top: 178px;
    }
    #mnp-bd span {
        text-align: right;
    }
    #mnp-bd h1 {
        margin-top: 49px;
    }
    #mnp-bd div {
        display: none;
    }

    #bresson img:last-of-type {
        grid-column: 1/-2;
        margin-top: 19px;
    }
    #bresson span {
        text-align: right;
    }
    #bresson hr:last-of-type {
        display: none;
    }

    #depardon {
        margin-top: 42px;
    }
    #depardon img:last-of-type {
        margin-top: 20px;
    }
    #depardon span {
        text-align: right;
    }
    #depardon hr:last-of-type {
        display: none;
    }

    #frizot-vegy {
        margin-top: 30px;
    }
    #frizot-vegy img:last-of-type {
        margin-top: 20px;
        grid-column: 1/-2;
    }
    #frizot-vegy span {
        text-align: right;
    }
    #frizot-vegy hr:last-of-type {
        display: none;
    }

    #rheims img {
        margin-top: 30px;
    }
    #rheims span {
        text-align: right;
    }

    #ingres-koons {
        margin-top: 31px;
    }
    #ingres-koons span {
        text-align: right;
    }

    #bresson-cuesta {
        margin-top: 50px;
    }
    #bresson-cuesta img:last-of-type {
        margin-top: 20px;
        grid-column: 2/-1;
    }
    #bresson-cuesta hr:last-of-type {
        display: none;
    }

    #cuesta-1 {
        margin-top: 42px;
    }
    #cuesta-1 img:first-of-type{
        grid-column: 1/-2;
    }
    #cuesta-1 img:last-of-type{
        margin-top: 20px;
    }
    #cuesta-1 hr {
        display: none;
    }

    #cuesta-2 img {
        margin-top: 20px;
    }
    #cuesta-2 img:last-of-type {
        grid-column: 1/-2;
    }
    #cuesta-2 span {
        text-align: right;
    }
    #cuesta-2 hr:last-of-type {
        display: none;
    }

    #steidl {
        margin-top: 42px;
    }
    #steidl span {
        text-align: right;
    }

    #steidl-2 {
        margin-top: 42px;
    }
    #steidl-2 img:first-of-type {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #steidl-2 hr:first-of-type {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }
    #steidl-2 span {
        text-align: right;
    }

    #recollets {
        margin-top: 44px;
    }
    #recollets span {
        text-align: right;
    }

    #remy {
        margin-top: 40px;
    }
    #remy span {
        text-align: right;
    }

    #weifenbach-mesuto {
        margin-top: 40px;
    }
    #weifenbach-mesuto img:last-of-type {
        grid-column: 2/-1;
    }

    #stessel-roy {
        margin-top: 40px;
    }
    #stessel-roy img:last-of-type {
        margin-top: 20px;
    }
    #stessel-roy span {
        text-align: right;

    }

    #fichard {
        margin-top: 40px;
    }
    #fichard img:nth-of-type(2),
    #fichard img:nth-of-type(3) {
        margin-top: 20px;
    }
    #fichard img:nth-of-type(3) {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #fichard span {
        text-align: right;
        grid-row: 7;
    }
    #fichard hr:nth-of-type(3) {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }
    #fichard hr:first-of-type,
    #fichard hr:nth-of-type(2) {
        display: none;
    }

    #roy-alexandre {
        margin-top: 31px;
    }
    #roy-alexandre img:nth-of-type(2) {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #roy-alexandre hr:nth-of-type(2) {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }
    #roy-alexandre span {
        text-align: right;
    }

    #loubier {
        margin-top: 36px;
    }
    #loubier img:not(:first-of-type){
        margin-top: 20px;
    }
    #loubier span {
        text-align: right;
    }
    #loubier hr:last-of-type {
        display: none;
    }

    #bresson-berger {
        margin-top: 45px;
    }
    #bresson-berger img:nth-of-type(2) {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #bresson-berger hr:nth-of-type(2) {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }
    #bresson-berger span {
        text-align: right;
    }

    #tartier-casselle {
        margin-top: 45px;
    }
    #tartier-casselle img:nth-of-type(2){
        margin-top: 20px;
    }
    #tartier-casselle img:last-of-type {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #tartier-casselle hr:nth-of-type(2) {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }
    #tartier-casselle hr:last-of-type {
        display: none;
    }

    #leveque-valloteau {
        margin-top: 30px;
    }
    #leveque-valloteau img:nth-of-type(2) {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
        margin-top: 20px;
    }
    #leveque-valloteau hr:nth-of-type(2) {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }
    #leveque-valloteau hr:first-of-type {
        display: none;
    }
    #leveque-valloteau span {
        grid-column: 2/-1;
        text-align: right;
    }

    #bouet {
        margin-top: 36px;
    }
    #bouet span {
        text-align: right;
    }

    #bresson-mafiol {
        margin-top: 50px;
    }
    #bresson-mafiol img:first-of-type {
        grid-column: 1/-2;
    }
    #bresson-mafiol img:last-of-type {
        margin-top: 20px;
    }
    #bresson-mafiol span {
        text-align: right;
    }
    #bresson-mafiol hr:first-of-type {
        display: none;
    }


}