:root
{
   --bg-color: #f4f6f8;
   --card-bg: #ffffff;
   --text-color: #2c3e50;
   --heading-color: #1a252f;
   --accent-color: #d35400;
   --border-color: #dcdde1;
}

@media (prefers-color-scheme: dark)
{
   :root
   {
      --bg-color: #121212;
      --card-bg: #1e1e1e;
      --text-color: #e0e0e0;
      --heading-color: #ffffff;
      --accent-color: #e67e22;
      --border-color: #333333;
   }
}

body
{
   background-color: var(--bg-color);
   color: var(--text-color);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   line-height: 1.6;
   margin: 0;
   padding: 20px;
}

h1
{
   color: var(--heading-color);
   text-align: center;
   margin-bottom: 30px;
}

h2
{
   border-bottom: 2px solid var(--accent-color);
   color: var(--heading-color);
   margin-top: 40px;
   padding-bottom: 8px;
   text-align: center;
   width: 100%;
}

h3
{
   color: var(--accent-color);
   margin-bottom: 5px;
   margin-top: 25px;
}

h4
{
   color: var(--text-color);
   font-weight: normal;
   margin-bottom: 15px;
   margin-top: 0;
}

.category-section
{
   margin-bottom: 40px;
}

.items-grid
{
   display: grid;
   gap: 25px;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   margin-top: 20px;
}

.item-card
{
   background: var(--card-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   padding: 20px;
}

.image-container
{
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-top: auto;
}

.item-card img
{
   border-radius: 4px;
   height: auto;
   object-fit: cover;
}

.item-card img.landscape
{
   flex: 1 1 calc(50% - 5px);
   max-width: 50%;
}

.item-card img.portrait
{
   flex: 1 1 100%;
   max-width: 100%;
}