large.css

body {
  --default-font: 14px;
  --default-line-height: 24px;
}

#main {
  display: flex;
  width: auto;
  height: 100%;
  flex-flow: row;
  justify-content: center;
  align-items: stretch;
}

#top {
  display: none;
}

#center {
  display: flex;
  border: 2px solid var(--default-border);
  flex: 2.5;
  padding: 0px 12px;
}

#left {
  display: flex;
  flex: 1;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}

#left .mode-container {
  display: flex;
}

table {
  width: 100%;
}

#right {
  display: flex;
  flex: 1;
}

#left,
#right {
  padding: 16px 12px;
  border: none;
  opacity: 0.8;
}

span > span > img {
  width: auto !important;
  object-fit: cover;
  max-height: 400px !important;
}

#home {
  display: block;
  background: none;
  font-size: 1.5em;
  border-style: dashed;
  border-width: 3px;
  border-top-color: red;
  border-bottom-color: #ff9200b8;
  border-radius: 5px;
  cursor: pointer;
}

a:hover,
#home:hover {
  color: var(--default-text);
  background: var(--default-border);
}

#yosemite,
#alaska,
#eastcoast,
#tableware,
#reveries {
  height: 50%;
  margin-top: 30%;
  width: max(60vw, 900px);
}

#yosemite div,
#alaska div,
#eastcoast div,
#tableware div img,
#reveries div img {
  max-width: 1000px;
}

#yosemite div img,
#alaska div img,
#eastcoast div img,
#tableware div img,
#reveries div img {
  height: 70%;
  width: auto;
}

#reveries div img {
  height: 80%;
  width: auto;
  margin: 0 48px;
}

#tableware h2,
#reveries h2 {
  position: absolute;
  top: 0;
}

#reveries h3 {
  position: absolute;
  top: 48px;
}