/* CSS for views/about.ejs */

@import "general.css";

.about-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  align-items: center;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
  background-color: var(--card-bg);
}

.about-image-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.about-image {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.about-text-section {
  padding: 1.25rem;
}

.about-subtitle {
  border-bottom: 2px solid var(--subtitle-border);
  color: var(--subtitle-color);
  text-transform: uppercase;
  font-weight: 500;
}

.about-title {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--title-color);
}

.about-highlight {
  color: var(--highlight-color);
}

.about-description {
  line-height: 1.625;
  color: var(--desc-color);
}

.about-strong {
  font-weight: 700;
}

/* Responsive Design */
@media (min-width: 640px) {
  .about-container {
    display: flex;
  }

  .about-image-section {
    width: 50%;
  }

  .about-text-section {
    width: 50%;
  }

  .about-title {
    font-size: 2.25rem;
  }
}