/* menu part */ .menu { border-top: double 4px silver; border-bottom: double 4px silver; font-size: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; } @media screen and (max-width: 800px) { .menu { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; } .menu .selected { border-bottom: double 4px silver; } } .menu-item { display: inline-block; width: 100%; height: 3em; line-height: 3em; /* to align to center */ text-align: center; vertical-align: middle; margin: 0 1%; overflow: hidden; text-overflow: ellipsis; font-size: medium; } .menu .selected { color: green; font-weight: bold; border-left: double 4px silver; border-right: double 4px silver; } .menu .menu-header { color: green; font-weight: bold; float: left; } .menu a { color: black; } /* 3 images part */ .images-container { display: inline-flex; flex-direction: row; width: 90%; margin: auto; } .images-container > img { margin: auto; width: 100%; height: 30vw; } @media screen and (max-width: 800px) { .images-container { flex-direction: column; } .images-container>img { width: 90%; height: 90%; /* object-fit: fill; */ } } /* text block part */ .info-block-header{ display: block; font-weight: bold; text-align: center; } .block-border{ border: solid black 2px; padding:2vw; } .block-a-container{ display: grid; grid-template-columns: 3fr 3fr 2fr; grid-template-rows: 1fr; } @media screen and (max-width: 800px) { .block-a-container{ display: flex; flex-direction: column; } } .block-b-container{ display: grid; grid-template-columns: 4fr 7fr 4fr; grid-template-rows: 1fr; } @media screen and (max-width: 800px) { .block-b-container{ display: flex; flex-direction: column; } } .h-block *{ margin: 2vw; } .h-block >span{ text-align: justify; } .h-block >img{ margin: auto; width: 100%; /* height: 30vw; */ }