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

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

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

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

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

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

    #delvaux {
        margin-top: var(--margin-top);
    }
    #delvaux img:first-of-type {
        grid-column: 4/8;
        grid-row: 1;
    }
    #delvaux img:last-of-type {
        grid-column: 8/13;
        grid-row: 1;
        align-self: end;
    }
    #delvaux span {
        grid-column: 1/4;
        grid-row: 1;
        align-self: end;
    }
    #delvaux hr:first-of-type {
        grid-column: 1/8;
        grid-row: 2;
    }
    #delvaux hr:last-of-type {
        grid-column: 8/13;
        grid-row: 2;
    }

    #delvaux-2 {
        grid-template-rows: auto 1fr auto auto auto 0.80fr auto;
    }
    #delvaux-2 img:first-of-type {
        grid-column: 3/8;
        grid-row: 1;
    }
    #delvaux-2 img:nth-of-type(2) {
        grid-column: 8/12;
        grid-row: 1/4;

    }
    #delvaux-2 img:nth-of-type(3) {
        grid-column: 1/6;
        grid-row: 5/7;
    }
    #delvaux-2 img:last-of-type {
        grid-column: 6/10;
        grid-row: 5;
    }
    #delvaux-2 span {
        grid-column: 5/8;
        grid-row: 3;
        align-self: end;
    }
    #delvaux-2 hr:first-of-type {
        grid-column: 3/8;
        grid-row: 2;
    }
    #delvaux-2 hr:nth-of-type(2) {
        grid-column: 5/12;
        grid-row: 4;
    }
    #delvaux-2 hr:nth-of-type(3) {
        grid-column: 6/10;
        grid-row: 6;
    }
    #delvaux-2 hr:last-of-type {
        grid-column: 1/6;
    }

    #delvaux-4 {
        margin-top: var(--margin-top);
    }
    #delvaux-4 img {
        grid-column: 5/13;
    }
    #delvaux-4 span {
        grid-column: 2/5;
        grid-row: 1;
        align-self: end;
    }
    #delvaux-4 hr {
        grid-column: 2/13;
        grid-row: 2;
    }

    #rykiel {
        margin-top: var(--margin-top);
    }
    #rykiel img:first-of-type {
        grid-column: 1/5;
        grid-row: 1;
        align-self: end;
    }
    #rykiel img:nth-of-type(2) {
        grid-column: 5/11;
        grid-row: 1;
    }
    #rykiel img:nth-of-type(3) {
        grid-column: 9/13;
        grid-row: 3;
    }
    #rykiel img:last-of-type {
        grid-column: 5/9;
        grid-row: 3;
    }
    #rykiel span {
        grid-column: 2/5;
        grid-row: 3;
        align-self: end;
    }
    #rykiel hr:first-of-type {
        grid-column: 1/5;
        grid-row: 2;
    }
    #rykiel hr:nth-of-type(2) {
        grid-column: 5/11;
        grid-row: 2;
    }
    #rykiel hr:nth-of-type(3) {
        grid-column: 2/9;
        grid-row: 4;
    }
    #rykiel hr:last-of-type {
        grid-column: 9/13;
        grid-row: 4;
    }

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

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

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

    #mnp-rheims {
        margin-top: 149px;
    }
    #mnp-rheims span {
        text-align: right;
    }
    #mnp-rheims h1 {
        margin-top: 45px;
    }
    #mnp-rheims div {
        display: none;
    }

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

    #hyeres-geneve {
        margin-top: 49px;
    }
    #hyeres-geneve img:last-of-type {
        margin-top: 20px;
    }
    #hyeres-geneve > span:first-of-type {
        display: none;
    }
    #hyeres-geneve span:last-of-type {
        text-align: right;
    }
    #hyeres-geneve hr:last-of-type {
        display: none;
    }

    #deauville {
        margin-top: 44px;
    }
    #deauville img {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #deauville hr {
        grid-column: 1/-2;
        width: calc(100% + 20px);
    }

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

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

    #delvaux-4 {
        margin-top: 29px;
    }
    #delvaux-4 span {
        text-align: right;
    }

    #rykiel {
        margin-top: 30px;
    }
    #rykiel img:first-of-type {
        grid-column: 1/5;
    }
    #rykiel img:nth-of-type(2),
    #rykiel img:nth-of-type(3) {
        margin-top: 20px;
    }
    #rykiel img:last-of-type {
        grid-column: 2/-1;
    }
    #rykiel hr:first-of-type,
    #rykiel hr:nth-of-type(2) {
        display: none;
    }

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

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