.global {
  background-color: #280906;
}

.breadcrumb-mobile {
  display: flex;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  padding: 1rem !important;

  border-bottom: 1px solid #8b4513 !important;
}

.breadcrumb-mobile a {
  text-decoration: none !important;
  color: #d0bc8f;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
  padding: 0.3rem 0.5rem !important;
  border-radius: 4px !important;
}

.breadcrumb-mobile a:hover {
  background-color: #8b4513 !important;
  color: #e2d4bb !important;
}

.breadcrumb-mobile a svg {
  width: 20px !important;
  height: 20px !important;
  margin-right: 0.3rem !important;
}

.breadcrumb-mobile span {
  color: #654321 !important;
}

h2 {
  font-family: "Grenze Gotisch";
  margin: auto;
  display: flex;
  margin-left: 10%;
}

.container {
  display: grid;
  grid-template-columns: auto 40%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title image"
    "content image";
  gap: 10px;
  color: #e2d4bb;
  font-family: "Goudy Bookletter 1911", serif;
}

.title-column {
  grid-area: title;
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

.content-column {
  grid-area: content;
  padding-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
}

.image-column {
  grid-area: image;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  padding-left: 40px;
  padding-right: 40px;
}

.bottom-desc {
  background-color: #0e0304;
  color: #e2d4bb;
  margin: 0px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 40px;
  padding-bottom: 10px;

  p {
    max-width: 40lh;
    margin-bottom: 20px;
  }
}

table {
  margin-left: 20px;
  margin-bottom: 40px;
}

tr {
  background: #280906;

  th {
    font-family: "Grenze Gotisch";
    font-size: large;
  }
}

tr.selected {
  background: #fff59d;
  color: red;
  transition: background 180ms ease;
}

.mainImg {
  width: 760px;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

/* Mobile: image responsive */
@media (max-width: 768px) {
  .mainImg {
    width: 100%;
    max-width: 100%;
  }
}

.maintitle {
  display: flex;
  color: white;
  gap: 10px;
  transform: rotate(2deg);
  margin: auto;
  justify-content: center;
  h1 {
    font-family: "Grenze Gotisch";
  }

  .rotated {
    font-family: "Pirata One";
    font-size: 4em;
    transform: rotate(8deg) translateY(5px);
  }
}

/* Mobile: stack as Title -> Image -> Content */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "content";
  }

  .title-column,
  .content-column,
  .image-column {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 18px;
  }

  .title-column {
    display: flex;
    justify-content: center;
  }

  .maintitle {
    justify-content: flex-start;
  }
}