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

@media (min-width: 481px) {
    #mnp-coutelle {
        grid-template-rows: auto auto;
    }
    #mnp-coutelle > h1 {
        grid-column: 1/6;
        grid-row: 1;
        align-self: end;
        margin-bottom: 0;
    }
    #mnp-coutelle > img {
        grid-column: 7/11;
        grid-row: 1/3;
        align-self: end;
    }
    #mnp-coutelle > span {
        grid-column: 5/7;
        grid-row: 2;
        align-self: end;
    }
    #mnp-coutelle > div {
        grid-column: 13/12;
        grid-row: 1;
        align-self: end;
    }
    #mnp-coutelle div p {
        margin: 0;
    }
    #mnp-coutelle hr {
        grid-column: 5/11;
        grid-row: 3;
    }

    #rouvre img {
        grid-column: 2/8;
    }
    #rouvre span {
        grid-column: 12/10;
        align-self: end;
        text-align: right;
    }
    #rouvre hr {
        grid-column: 2/12;
        grid-row: 2;
    }

    #fujimoto-degez {
        grid-template-rows: auto auto 1fr;
    }
    #fujimoto-degez img:first-of-type {
        grid-column: 5/8;
        grid-row: 1;
    }
    #fujimoto-degez img:last-of-type {
        grid-column: 8/12;
        grid-row: 1/4;
    }
    #fujimoto-degez span:first-of-type {
        grid-column: 2/4;
        grid-row: 1;
        align-self: end;
    }
    #fujimoto-degez span:last-of-type {
        grid-column: 5/7;
        grid-row: 3;
        align-self: end;
    }
    #fujimoto-degez hr:first-of-type {
        grid-column: 2/8;
        grid-row: 2;
    }
    #fujimoto-degez hr:last-of-type {
        grid-column: 5/12;
        grid-row: 4;
    }

    #bouquet-palast {
        grid-template-rows: auto 1fr auto;
    }
    #bouquet-palast > span:last-of-type {
        grid-column: 2/4;
        grid-row: 2;
        align-self: end;
    }
    #bouquet-palast > img:last-of-type {
        grid-column: 4/8;
        grid-row: 1/3;
    }
    #bouquet-palast > img:first-of-type {
        grid-column: 8/11;
        grid-row: 1;
    }
    #bouquet-palast > span:first-of-type {
        grid-column: 13/12;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #bouquet-palast hr:first-of-type {
        grid-column: 8/13;
        grid-row: 2;
    }
    #bouquet-palast hr:last-of-type {
        grid-column: 2/8;
    }

    #trautmann img:first-of-type {
        grid-column: 1/4;
    }
    #trautmann img:nth-of-type(2) {
        grid-column: 4/7;
    }
    #trautmann img:last-of-type {
        grid-column: 7/10;
    }
    #trautmann span {
        grid-column: 12/10;
        align-self: end;
        text-align: right;
    }
    #trautmann hr {
        grid-column: 1/12;
        grid-row: 2;
    }

    #greco-gapaillard {
        grid-template-rows: auto auto 1fr;
    }
    #greco-gapaillard > img {
        grid-column: 1/7;
        grid-row: 1/4;
    }
    #greco-gapaillard > span:first-of-type {
        grid-column: 10/8;
        grid-row: 3;
        align-self: end;
        text-align: right;
    }
    #greco-gapaillard > video {
        grid-column: 7/11;
        grid-row: 1;
        max-height: 660px;
    }
    #greco-gapaillard > span:last-of-type {
        grid-column: 13/11;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #greco-gapaillard hr:first-of-type {
        grid-column: 7/13;
        grid-row: 2;
    }
    #greco-gapaillard hr:last-of-type {
        grid-column: 1/10;
        grid-row: 4;
    }

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

    #stelzenberger {
        grid-template-rows: auto auto 1fr auto;
    }
    #stelzenberger > img:first-of-type {
        grid-column: 2/5;
        grid-row: 1;
    }
    #stelzenberger hr:first-of-type {
        grid-column: 1/5;
        grid-row: 2;
    }
    #stelzenberger > span:first-of-type {
        grid-column: 1/4;
        grid-row: 3;
    }
    #stelzenberger > img:last-of-type {
        grid-column: 5/10;
        grid-row: 1/4;
    }
    #stelzenberger > span:last-of-type {
        grid-column: 12/9;
        grid-row: 3;
        align-self: end;
        text-align: right;
    }
    #stelzenberger hr:last-of-type {
        grid-column: 5/12;
        grid-row: 4;
    }

    #stelzenberger-degez {
        grid-template-rows: 1fr auto;
    }
    #stelzenberger-degez > span:first-of-type {
        grid-column: 2/4;
        grid-row: 2;
        align-self: end;
    }
    #stelzenberger-degez > img:first-of-type {
        grid-column: 4/8;
        grid-row: 1/3;
    }
    #stelzenberger-degez hr:first-of-type {
        grid-column: 8/13;
        grid-row: 1;
        align-self: end;
    }
    #stelzenberger-degez > img:last-of-type {
        grid-column: 8/11;
        grid-row: 2;
        align-self: end;
    }
    #stelzenberger-degez > span:last-of-type {
        grid-column: 13/11;
        grid-row: 2;
        text-align: right;
    }
    #stelzenberger-degez hr:last-of-type {
        grid-column: 2/8;
        grid-row: 3;
    }

    #degez-stelzenberger {
        grid-template-rows: auto auto 1fr;
    }
    #degez-stelzenberger > span:first-of-type {
        grid-column: 1/3;
        grid-row: 1;
        align-self: end;
    }
    #degez-stelzenberger > img:first-of-type {
        grid-column: 3/8;
        grid-row: 1;
    }
    #degez-stelzenberger hr:first-of-type {
        grid-column: 1/8;
        grid-row: 2;
    }
    #degez-stelzenberger > img:last-of-type {
        grid-column: 8/13;
        grid-row: 1/4;
    }
    #degez-stelzenberger > span:last-of-type {
        grid-column: 5/7;
        grid-row: 3;
        align-self: end;
    }
    #degez-stelzenberger hr:last-of-type {
        grid-column: 5/13;
        grid-row: 4;
    }

    #stelzenberger-2 {
        grid-template-rows: 1fr auto auto;
    }
    #stelzenberger-2 > span:first-of-type {
        grid-column: 2/4;
        grid-row: 3;
        align-self: end;
    }
    #stelzenberger-2 > img:first-of-type {
        grid-column: 4/8;
        grid-row: 1/4;
    }
    #stelzenberger-2 > span:last-of-type {
        grid-column: 13/11;
        align-self: end;
        text-align: right;
    }
    #stelzenberger-2 hr:first-of-type {
        grid-column: 8/13;
        grid-row: 2;
    }
    #stelzenberger-2 > img:last-of-type {
        grid-column: 8/12;
        grid-row: 3;
        align-self: end;
    }
    #stelzenberger-2 hr:last-of-type {
        grid-column: 2/8;
        grid-row: 4;
    }

    #dumas-monnier {
        grid-template-rows: auto auto 1fr;
    }
    #dumas-monnier span:first-of-type {
        grid-column: 1/3;
        grid-row: 1;
        align-self: end;
    }
    #dumas-monnier img:first-of-type {
        grid-column: 3/8;
        grid-row: 1;
    }
    #dumas-monnier hr:first-of-type {
        grid-column: 1/8;
        grid-row: 2;
    }
    #dumas-monnier img:last-of-type {
        grid-column: 8/12;
        grid-row: 1/4;
    }
    #dumas-monnier span:last-of-type {
        grid-column: 6/8;
        grid-row: 3;
        align-self: end;
    }
    #dumas-monnier hr:last-of-type {
        grid-column: 6/12;
        grid-row: 4;
    }

    #camille-charolotte img:first-of-type {
        grid-column: 2/5;
    }
    #camille-charolotte img:nth-of-type(2) {
        grid-column: 5/8;
    }
    #camille-charolotte img:last-of-type {
        grid-column: 8/11;
    }
    #camille-charolotte span {
        grid-column: 13/11;
        align-self: end;
        text-align: right;
    }
    #camille-charolotte hr:last-of-type {
        grid-column: 2/13;
        grid-row: 2;
    }

    #palast span {
        grid-column: 1/3;
        align-self: end;
        grid-row: 1;
    }
    #palast img:first-of-type {
        grid-column: 4/8;
    }
    #palast img:last-of-type {
        grid-column: 8/11;
        align-self: end;
    }
    #palast hr:first-of-type {
        display: none;
    }
    #palast hr:last-of-type {
        grid-column: 1/11;
        grid-row: 2;
    }

    #zaghian > img:first-of-type {
        grid-column: 4/8;
        grid-row: 1/3;
    }
    #zaghian > img:last-of-type {
        grid-column: 8/11;
        grid-row: 1;
    }
    #zaghian > span {
        grid-column: 13/11;
        grid-row: 2;
        align-self: end;
        text-align: right;
    }
    #zaghian hr:first-of-type {
        display: none;
    }
    #zaghian hr:last-of-type {
        grid-column: 4/13;
    }

    #stelzenberger-lippmann {
        grid-template-rows: auto auto 1fr;
    }
    #stelzenberger-lippmann span:first-of-type {
        grid-column: 1/3;
        grid-row: 1;
        align-self: end;
    }
    #stelzenberger-lippmann img:first-of-type {
        grid-column: 3/7;
        grid-row: 1;
    }
    #stelzenberger-lippmann hr:first-of-type {
        grid-column: 1/7;
        grid-row: 2;
    }
    #stelzenberger-lippmann img:last-of-type {
        grid-column: 7/13;
        grid-row: 1/4;
    }
    #stelzenberger-lippmann span:last-of-type {
        grid-column: 4/6;
        grid-row: 3;
        align-self: end;
    }
    #stelzenberger-lippmann hr:last-of-type {
        grid-column: 4/13;
        grid-row: 4;
    }
}

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

    #mnp-coutelle {
        margin-top: 31px;
    }
    #mnp-coutelle div {
        display: none;
    }
    #mnp-coutelle img {
        grid-row: 1;
    }
    #mnp-coutelle hr {
        grid-row: 2;
    }
    #mnp-coutelle span {
        grid-row: 3;
        text-align: right;
    }

    #rouvre {
        margin-top: 35px;
    }
    #rouvre span {
        text-align: right;
    }

    #fujimoto-degez {
        margin-top: 20px;
    }
    #fujimoto-degez span {
        text-align: right;
    }
    #fujimoto-degez img:last-of-type {
        margin-top: 34px;
    }

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

    #trautmann {
        margin-top: 34px;
    }
    #trautmann img:nth-of-type(2) {
        display: none;
    }
    #trautmann img:last-of-type {
        margin-top: 20px;
    }

    #greco-gapaillard img:first-of-type {
        margin-top: 33px;
    }
    #greco-gapaillard video {
        margin-top: 33px;
    }
    #greco-gapaillard span {
        text-align: right;
    }

    #sander {
        margin-top: 30px;
    }
    #sander img:last-of-type {
        margin-top: 20px;
    }
    #sander span {
        text-align: right;
    }

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

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

    #degez-stelzenberger span {
        text-align: right;
    }
    #degez-stelzenberger img:last-of-type {
        margin-top: 34px;
    }

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

    #dumas-monnier {
        margin-top: 29px;
    }
    #dumas-monnier span {
        text-align: right;
    }
    #dumas-monnier img:last-of-type {
        margin-top: 26px;
    }

    #camille-charolotte {
        margin-top: 26px;
    }
    #camille-charolotte img:first-of-type {
        display: none;
    }
    #camille-charolotte img:last-of-type {
        margin-top: 20px;
    }
    #camille-charolotte span {
        text-align: right;
    }

    #palast img:first-of-type {
        margin-top: 24px;
    }
    #palast img:last-of-type {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #palast hr:last-of-type {
        grid-column: 1/-1;
    }
    #palast hr:last-of-type {
        grid-column: 1/-2;
        width: calc(100% + var(--gutters));
    }

    #zaghian {
        margin-top: 26px;
    }
    #zaghian img:last-of-type {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #zaghian hr:last-of-type {
        grid-column: 1/-2;
        width: calc(100% + var(--gutters));
    }

    #stelzenberger-lippmann {
        margin-top: 33px;
    }
    #stelzenberger-lippmann span {
        text-align: right;
    }
    #stelzenberger-lippmann img:last-of-type {
        margin-top: 34px;
    }

}