/* menu part */ .menu { border-top: double thick silver; border-bottom: double thick silver; font-size: 0; display: grid; grid-template-columns: repeat(7, min-content); grid-template-rows: 1fr; justify-items: start; } .menu-item { display: inline-block; width: max-content; height: 3em; line-height: 3em; /* to align to center */ text-align: center; vertical-align: middle; padding: 0 10px; margin: 0 10px; overflow: hidden; text-overflow: ellipsis; font-size: medium; } .menu .selected { color: green; font-weight: bold; border-left: double thin silver; border-right: double thin silver; } .menu .menu-header { color: green; font-weight: bold; } .menu a { color: black; } @media screen and (max-width: 800px) { .menu { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; justify-items: center; } .menu .selected { border-bottom: double thick silver; } } /* 3 images part */ .images-container { display: flex; flex-direction: row; width: 90%; margin: auto; } .images-container>img { margin: auto; width:100%; border: thin solid black; } .images-container>img:nth-child(2n+1) { margin-top: 10px; } @media screen and (max-width: 800px) { .images-container { display: inline-flex; flex-direction: column; width: 100%; } .images-container>img { width: 100%; height: 100%; } .images-container>img:nth-child(2n+1) { margin-top: 0px; } } /* text block part */ .info-block-header { display: block; font-weight: bold; text-align: center; } .block-border { border: solid thin black; padding: 2vw; margin: 1vw 0; } .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, .h-block>div { text-align: justify; } .h-block>img { margin: auto; width: 100%; } /*small articles part*/ .main-right{ border-left: thin solid black; margin: 30px 0 0 50px; } .small-info-block{ margin: 20px 10px 0 ; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; } @media screen and (max-width: 1000px) { .small-info-block { display: flex; flex-direction: column; } } .small-info-block-header{ display: block; font-weight: bold; text-align: right; } .small-info-block-image >img{ width: 100%; } .small-info-block-text { text-align: justify; } .small-info-block-text >a{ display: block; text-align: right; } /*main part*/ .main{ display: grid; grid-template-columns: 3fr 1fr; grid-template-rows: 1fr; } @media screen and (max-width: 800px) { .main { display: flex; flex-direction: column; } }