*{box-sizing:border-box;margin:0;padding:0;font-family:anton,sans-serif}body .header{height:120px;background-color:#fff;display:grid;place-items:center;img { height: 110px; }}body .navigation{height:50px;background-color:#eb2426;font-weight:bolder;font-size:15px;border-top:2px solid #1e2a5a;border-bottom:2px solid #1e2a5a;ul { list-style: none; display: grid; grid-template-columns: auto auto auto auto; margin: 0 0; } ul li { display: inline-block; height: 46px; line-height: 46px; text-align: center; &:hover, &:active, &:focus { background-color: #1E2A5A; cursor: pointer; } a, a:hover, a:active, a:focus, a:link, a:visited { display: block; color: #FFFFFF; text-decoration: none; text-transform: uppercase; cursor: pointer; } }}body .main{margin:5px;display:grid;grid-template-columns:1fr 6fr;column-gap:10px;font-size:20px;color:#1e2a5a;p { margin: 25px 10px 0 5px; line-height: 1.25; } .photos { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; row-gap: 5px; img { max-width: 100%; height: auto; } } &.home { grid-template-columns: 1fr; row-gap: 20px; .content { order: 1; } .photos { order: 2; } }}body .main.default{grid-template-columns:1fr;.photos { display: none; } h4 { margin: 15px 0; font-weight: normal; text-decoration: underline; } h5 { margin: 15px 0; } h4 + h5 { margin: 0 0 15px 0; } ul { list-style: disc; padding: 15px 15px 0 15px; } ul li { margin-left: 20px; }}body .main.default.faq{details { cursor: pointer; summary { font-size: 1rem; font-weight: bold; } p { margin: 0 0 0 20px; line-height: 1.2; font-size: 1.1rem; padding: 10px 0; } }}body .footer{height:125px;padding:0 10px;display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#fff;background-color:#1e2a5a;p { opacity: 0.4; justify-self: start; } a { justify-self: end; opacity: 0.4; }}@media(min-width:577px){}@media(min-width:769px){body .navigation{font-size:20px}}@media(min-width:900px){body{.navigation { ul { margin: 0 15vw; } } .main { &.home { grid-template-columns: 4fr 5fr; column-gap: 20px; .content { order: 2; } .photos { order: 1; } } &.default { grid-template-columns: 2fr 5fr; column-gap: 50px; .photos { display: block; margin: 20px 10px 0 10px; } } }}}@media(min-width:1200px){body{.navigation { ul { margin: 0 25vw; } }}}