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

@media (min-width: 481px) {
    #mnp-greco h1 {
        grid-column: 1/6;
        grid-row: 1;
        align-self: end;
        margin-bottom: 0;
    }
    #mnp-greco img {
        grid-column: 6/11;
        grid-row: 1/3;
    }
    #mnp-greco div {
        grid-column: 12;
        grid-row: 1;
        text-align: right;
        align-self: end;
    }
    #mnp-greco span {
        grid-column: 3/5;
        grid-row: 2;
        align-self: end;
    }
    #mnp-greco hr {
        grid-column: 3/11;
        grid-row: 3;
    }
    #mnp-greco div p {
        margin: 0;
    }

    #morice-bouquet span:first-of-type {
        grid-column: 1/3;
        grid-row: 1;
        align-self: end;
    }
    #morice-bouquet img:first-of-type {
        grid-column: 3/7;
        grid-row: 1;
    }
    #morice-bouquet hr {
        grid-column: 1/7;
        grid-row: 2;
    }
    #morice-bouquet img:last-of-type {
        grid-column: 7/11;
        grid-row: 1/3
    }
    #morice-bouquet span:last-of-type {
        grid-column: 11/13;
        grid-row: 2;
        text-align: right;
        align-self: end;
    }
    #morice-bouquet hr:last-of-type {
        grid-column: 7/13;
        grid-row: 3;
    }

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

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

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

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

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

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

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

    #schweizer-stelzenbertger {
        display: none;
    }

    #dumas img {
        margin-top: 20px;
        grid-column: 1/10;
    }
    #dumas span {
        margin-top: 20px;
        grid-column: 10/12;
        text-align: right;
        align-self: end;
    }
    #dumas hr {
        grid-column: 1/12;
        grid-row: 2;
    }

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

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

    #mnp-greco {
        margin-top: 30px;
    }
    #mnp-greco div {
        display: none;
    }
    #mnp-greco span {
        text-align: right;
    }
    #mnp-greco h1 {
        margin-top: 19px;
    }

    #morice-bouquet img{
        margin-top: 34px;
    }
    #morice-bouquet span{
        text-align: right;
    }

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

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

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

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

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

    #maillet-bouquet img {
        margin-top: 35px;
    }
    #maillet-bouquet span {
        text-align: right;
    }

    #schwoerer {
        margin-top: 33px;
    }
    #schwoerer span {
        text-align: right;
    }

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

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

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