@import url('/original.css');

/* Original desktop geometry, with only the requested middle section retained. */
html { min-width: 320px; }
body { min-height: 100vh; overflow-x: clip; }
div.contents {
  position: relative;
  margin-top: 48px;
  padding-bottom: 0;
  min-height: calc(100vh - 48px);
  background-position: center 335px;
}
.grandexchange--home .banner {
  top: -26px;
  margin-top: 0;
}
.banner img { margin-left: -10px; transform: translateX(-50%); }
.main { box-shadow: 0 355px 15px 12px #000; }
.search input[type='search'] { box-sizing: border-box; }
.landing-boxes article > a { display: block; }
a:focus-visible, input:focus-visible {
  outline: 2px solid #e1bb34;
  outline-offset: 4px;
}
.search input.text:focus-visible { outline: 2px solid #e1bb34; outline-offset: 2px; }

/* Keep the same artwork and hierarchy on smaller screens. */
@media (max-width: 1050px) {
  div.contents { margin-top: 30px; min-height: calc(100vh - 30px); }
  .main, .grandexchange .main { width: calc(100% - 40px); }
  .title { margin-top: -30px; padding-top: 0; }
  .grandexchange .title span {
    height: auto;
    font-size: 0;
    line-height: 0;
    aspect-ratio: 903 / 105;
    padding-top: 0;
    background-size: 100% auto;
    background-position: center top;
  }
  .title:before, .title:after { top: 0; }
  .title span:before { display: none; }
  .breadcrumb { box-sizing: border-box; width: calc(100% + 20px); margin-top: 20px; }
  .secondary a { margin: 0 12px; padding: 0 10px; font-size: clamp(15px, 2vw, 20px); }
  .search-form { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 22px; }
  .search input[type='search'] { width: min(606px, 72%); min-width: 0; }
  .search-submit { flex-shrink: 0; }
  .landing-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px 0; }
  .landing-boxes .clear { display: contents; }
  .landing-boxes .clear::before, .landing-boxes .clear::after { display: none; }
  .landing-boxes article, .landing-boxes .catalogue {
    box-sizing: border-box;
    float: none;
    width: auto;
    margin: 0;
    padding: 18px 12px 10px;
    min-height: 309px;
  }
  .landing-boxes .basic { min-height: 180px; }
  .landing-boxes h3 { font-size: clamp(22px, 3vw, 30px); }
  .landing-boxes .basic h3 { font-size: clamp(15px, 1.96vw, 21px); }
  .landing-boxes p { padding-left: 90px; }
}

@media (max-width: 760px) {
  div.contents { background-position: center 280px; }
  .main, .grandexchange .main { width: calc(100% - 28px); }
  .title { margin-left: 0; padding-right: 0; background-position: -19px 0, 0 36px; }
  .title span { margin-left: 0; }
  .title:before, .title:after { display: none; }
  .breadcrumb { font-size: 14px; padding: 12px 22px; margin-top: 16px; }
  .secondary, .secondary ul { height: auto; }
  .secondary ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secondary ul::before, .secondary ul::after { display: none; }
  .secondary li { float: none; }
  .secondary a { text-align: center; line-height: 50px; margin: 0; padding: 0 8px; font-size: 18px; }
  .secondary .active a { background: url('/assets/background-main-full-width.jpg') 0 0; }
  .secondary .active a:before, .secondary .active a:after { display: none; }
  .search { padding: 24px 0; background-position: left bottom; }
  .search-form { padding: 0 14px; gap: 5px; }
  .grandexchange .search-label { font-size: 16px; }
  .search input[type='search'] { flex: 1; width: 0; font-size: 16px; margin: 0; }
  .landing-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-boxes .catalogue { order: 5; }
  .landing-boxes .item { order: 6; }
  .landing-boxes article { min-height: 300px; }
  .landing-boxes .basic, .landing-boxes .catalogue { min-height: 194px; }
  .landing-boxes .basic h3, .landing-boxes h3 { font-size: 21px; }
  .landing-boxes p { font-size: 16px; }
}

@media (max-width: 540px) {
  .landing-boxes { grid-template-columns: minmax(0, 1fr); }
  .landing-boxes article, .landing-boxes .catalogue { padding: 18px 17px 10px; }
  .landing-boxes h3 { font-size: 28px; }
  .landing-boxes .basic h3 { font-size: 22px; }
  .landing-boxes p { padding-left: 99px; }
  .landing-boxes .rises, .landing-boxes .falls { background-size: 100% 100%; }
  .landing-boxes .catalogue { order: 0; }
  .landing-boxes .basic, .landing-boxes .catalogue { min-height: 180px; }
  .landing-boxes .item img { top: 80px; }
}