.information-wrapper { padding-top: 2.3rem; border-top: solid 8px #edebe9; padding-bottom: 3.2rem; } .information__title { text-transform: uppercase; font-size: 1.4rem; color: rgba(0, 0, 0, 0.3); margin-bottom: 2.4rem; line-height: 1.6rem; } .information-wrapper .col4.conceptStore { display: grid; gap: 2.2rem; } .information-wrapper .photo { display: block; margin-bottom: 2.4rem; } .information-wrapper .photo img { width: 100%; object-fit: cover; } .information-wrapper .conceptStore h3 { font-size: 1.8rem; line-height: 2.8rem; margin-bottom: 1.6rem; font-weight: 700; } .information-wrapper .container > div{ flex: 0 0 calc(50% - 32px); } .information-wrapper .text { font-size: 1.3rem; line-height: 2.2rem; } .information-wrapper .text + .text{ margin-top: 1.6rem; } .links { margin-top: 2.4rem; flex: 0 0 100%; } .links li { display: flex; justify-content: flex-end; } .information-wrapper .links li, .information-wrapper .links { list-style: none; } .information-wrapper .links a { color: #00754a; font-size: 1.3rem; line-height: 1.8rem; font-weight: 500; } .information-wrapper .textBoxContainer{ display: grid; --gap: 2.2rem; gap: var(--gap); grid-template-columns: 1fr; margin-top: var(--gap); } .information-wrapper .boxContainer{ display: grid; gap: calc(var(--gap) * .5); } .information-wrapper .thumb img{ width: 100%; height: auto; } .information-wrapper .container.additionalInfo{ display: grid; gap: 64px; } .additionalInfo .textBoxContainer{ grid-template-columns: 1fr; grid-auto-flow: row; gap: 2rem; } .additionalInfo .boxContainer{ grid-template-columns: 70px 1fr; padding: 2rem; border-radius: .5rem; background-color: #f4f8f4; } .additionalInfo .boxContainer.greenBook{ background-color: #F8F6F4; } .additionalInfo .thumb img{ mix-blend-mode: darken; } .additionalInfo .text a{ display: block; width: fit-content; margin: .5rem 0 0 auto; } @media (min-width: 812px) { .information-wrapper { padding-top: 3.5rem; padding-bottom: 4.6rem; } .information__title { font-size: 1.3rem !important; line-height: 2.7rem; margin-bottom: 3.2rem; } .information-wrapper .col4.conceptStore { gap: 3.2rem; } .information-wrapper .container { display: flex; justify-content: space-between; flex-wrap: wrap; } .information-wrapper .container.additionalInfo{ display: grid; grid-template-columns: repeat(2, 1fr); } .information-wrapper .photo { flex: 1; margin-bottom: 0; } .information-wrapper .text { flex: 1; /* display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; */ } .information-wrapper .conceptStore h3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .links { margin-top: 3.2rem; } .information-wrapper .links a { font-size: 1.4rem; line-height: 2.4rem; } .information-wrapper .textBoxContainer{ --gap: 3.2rem; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--gap) * 1.125); } .additionalInfo .textBoxContainer{ grid-template-columns: auto; margin-top: 0; } } @media screen and (min-width: 812px) and (max-width: 1023px) { .information-wrapper .conceptStore h3 { font-size: 1.6rem; line-height: 2rem; margin-bottom: 1.6rem; -webkit-line-clamp: 2; } .information-wrapper .photo { flex: 0 0 calc(50% - 16px); } .information-wrapper .text { font-size: 1.2rem; line-height: 2rem; /* -webkit-line-clamp: 4; */ flex: 0 0 calc(50% - 16px); } .information-wrapper .container.additionalInfo{ gap: 32px; } } @media (min-width: 1024px) { .information-wrapper .conceptStore h3 { font-size: 2.4rem; line-height: 3.8rem; margin-bottom: 2.8rem; -webkit-line-clamp: 3; } .information-wrapper .photo { flex: 0 0 calc(50% - 32px); } .information-wrapper .text { font-size: 1.5rem; line-height: 2.4rem; /* -webkit-line-clamp: 4; */ flex: 0 0 calc(50% - 32px); } .information-wrapper .container.additionalInfo{ gap: 64px; } }