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

@media (min-width: 481px) {
    #mnp-belin {
        grid-template-rows: auto auto;
    }
    #mnp-belin h1 {
        grid-column: 1/6;
        grid-row: 1;
        align-self: end;
        margin: 0;
    }
    #mnp-belin img {
        grid-column: 6/12;
        grid-row: 1/3;
    }
    #mnp-belin span {
        grid-column: 2/4;
        grid-row: 2;
        align-self: end;
    }
    #mnp-belin div {
        grid-column: 12;
        grid-row: 1;
        align-self: end;
    }
    #mnp-belin hr {
        grid-column: 2/12;
        grid-row: 3;
    }

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

    #wonderland span {
        grid-column: 4/6;
        align-self: end;
        grid-row: 1;
    }
    #wonderland img {
        grid-column: 8/12;
    }
    #wonderland hr {
        grid-column: 4/12;
        grid-row: 2;
    }

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

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

    #voltaire-foo {
        grid-template-rows: min-content min-content 1fr;
    }
    #voltaire-foo span:first-of-type {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
    }
    #voltaire-foo span:nth-of-type(2) {
        grid-column: 1/3;
        grid-row: 1;
    }
    #voltaire-foo span:last-of-type {
        grid-column: 13;
        grid-row: 3;
        text-align: right;
    }
    #voltaire-foo img:first-of-type {
        grid-column: 4/8;
        grid-row: 1/4;
    }
    #voltaire-foo img:last-of-type {
        grid-column: 8/13;
        grid-row: 1;
    }
    #voltaire-foo hr:first-of-type {
        grid-column: 8/13;
        grid-row: 2;
    }
    #voltaire-foo hr:last-of-type {
        grid-column: 2/8;
        grid-row: 4;
    }

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

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

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

    #stelzenberger-thomas {
        grid-template-rows: 1fr auto;
    }

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

    #stelzenberger-lippmann span:last-of-type {
        grid-column: 1/3;
        grid-row: 1;
    }
    #stelzenberger-lippmann span:first-of-type {
        grid-column: 1/3;
        grid-row: 2;
        align-self: end;
    }
    #stelzenberger-lippmann img {
        grid-column: 5/13;
        grid-row: 1/3;
    }
    #stelzenberger-lippmann hr {
        grid-column: 1/13;
        grid-row: 3;
    }
}

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

    #mnp-belin span {
        text-align: right;
    }
    #mnp-belin img {
        margin-top: 190px;
    }
    #mnp-belin h1 {
        margin-top: 31px;
    }
    #mnp-belin div {
        display: none;
    }

    #stelzenberger {
        margin-top: 35px;
    }

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

    #wonderland-2 {
        margin-top: 35px;
    }
    #wonderland-2 span {
        text-align: right;
    }
    #wonderland-2 img:last-of-type {
        margin-top: 35px;
    }

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

    #voltaire-foo {
        margin-top: 35px;
    }
    #voltaire-foo span:first-of-type {
        text-align: right;
    }
    #voltaire-foo img:last-of-type,
    #voltaire-foo span:not(:first-of-type),
    #voltaire-foo hr:last-of-type {
        display: none;
    }

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

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

    #stelzenberger-3 {
        margin-top: 34px;
    }
    #stelzenberger-3 span {
        text-align: right;
    }

    #stelzenberger-thomas img {
        margin-top: 34px;
    }
    #stelzenberger-thomas span {
        text-align: right;
    }

    #stelzenberger-lippmann span:last-of-type {
        display: none;
    }
    #stelzenberger-lippmann img {
        margin-top: 35px;
    }

}