.site-header,
.site-footer {
display: flex;
justify-content: space-between;
gap: 30px;
padding: 30px;
background: #eeeeee;
}
.site-header > .nav > ul,
.site-footer > .nav > ul {
display: flex;
gap: 1em;
padding: 0;
list-style: none;
}   .ext-bnr{
display: flex;
justify-content: center;
align-items: center;
background: var(--color-brown-light);
padding: clamp(20px, 2.3255813953vw, 40px) 1em 0;
}
.ext-bnr > a{
display: inline-block;
}  .banner-wrapper-section {
background: var(--color-brown-light);
padding: 85px 0 0 0;
}
.banner-wrapper {
display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0 auto; padding: 0 1em;
max-width: 100%; flex-wrap: wrap; } .banner-item {
display: block; transition: opacity 0.3s; }
.banner-item:hover {
opacity: 0.8; } .banner-item img {
max-width: 100%; height: auto; vertical-align: bottom; } @media screen and (max-width: 768px) {
.banner-wrapper {
flex-direction: column; gap: 20px; }
.banner-item {
width: 100%; display: flex; justify-content: center; }
} @media screen and (max-width: 900px) {
html, body {
height: auto !important;
min-height: 100vh !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
width: 100% !important;
}
#wrapper, .wrapper, #container, .container, main, article {
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
* {
max-height: none !important;
}
}