.home-page-layout-content { .block-block-content3bb825b3-ab84-4861-a4f2-2a5e5eed74de{ border: solid $yellow-puca 1px; background-color: $white-button; font-weight: 1000; padding: 2rem; margin-right: 1rem; width: 16vw; margin-left: 15%; padding-top: 0.5rem; padding-left: 0.8rem; padding-bottom: 5rem; @media(max-width: 891px){ margin-bottom: 1rem; margin-top: 2rem; width: 50%; // margin: auto; } p{ margin: 0; font-size: 1.3rem; } strong{ font-size: 1.5rem; } } .block-views-blocksites-block-1 { top: -60px; position: relative; height: 550px; .views-row{ @media(max-width: 891px){ margin-left: 1.8rem; margin-right: 1.8rem; } .node-type-site{ width: 70%; margin: auto; display: grid; grid-template-rows: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr); @media(max-width: 891px){ width: 100%; display: flex; flex-direction: column; } .image-site{ order: 1; grid-row: 1/span 10; grid-column: 2/span 10; width: 100%; img { max-height: 600px; width: 100%; object-fit: contain; } } .infos-content-site{ background-color: $white-button; width: 20vw; order: 2; display: flex; flex-direction: column; grid-row: 7/span 5; grid-column: 10/span 10; padding: 1rem; z-index: 99; @media(max-width: 891px){ width: auto; } h1{display: none;} h2{ order: 3; margin: 0; font-size: 1.8rem; font-weight: 1000; @media(max-width: 891px){ font-size: 1.2rem; line-height: 1.3rem; } } .first-row{ order: 1; display:flex; flex-direction: row; align-items: end; padding-bottom: 0.5rem; .field--name-field-numero-site { order: 1; text-transform: uppercase; font-size: 1rem; display: inline-flex; &::after{ content: '|'; padding-left: 1rem; padding-right: 1rem; } } .field--name-field-adresse-site{ order: 3; font-size: 1.2rem; .field__item{ display: flex; } .field__item{ display: flex; } .address{ margin: 0; display: inline-flex; .postal-code{ order: 2; } .locality{ order: 1; text-transform: capitalize; margin-right: 0.5rem; } .country{ display: none; } } } } .field--name-field-architecte{ order: 4; font-size: 1.4rem; padding-top: 0.5rem; .field__items{ display: flex; flex-direction: row; flex-wrap: wrap; .field__item{ display: inline; &::after{ content:','; padding-right: 0.5rem; } } } .field__item:last-of-type::after { content: ''; } } } } } } .block-block-content9e601647-144f-4e8e-b9e1-7d744f9141d7{ width: fit-content; margin: auto; z-index: 99; // position: relative; // top: -10px; margin-top: 2rem; } }