/* src/styles/about.scss */
.about-concept {
  display: grid;
  row-gap: var(--SPACING);
}
@media (width >= 768px) {
  .about-concept {
    grid-template: "image-left content image-right"/1fr auto 1fr;
    align-items: end;
  }
}
.about-concept__content {
  text-align: center;
}
@media (width >= 768px) {
  .about-concept__content {
    grid-area: content;
  }
}
.about-concept__catch {
  color: var(--COLOR_PRIMARY);
  font-size: 2rem;
}
.about-concept__text {
  margin-top: var(--SPACING);
  color: #cf7b23;
}
.about-concept__text-highlight {
  font-weight: var(--FONT_WEIGHT_BOLD);
  background-image: linear-gradient(transparent 60%, rgba(226, 174, 122, 0.3) 40%);
}
.about-concept__image {
  display: flex;
  justify-content: center;
  column-gap: 40px;
}
@media (width >= 768px) {
  .about-concept__image {
    display: contents;
  }
}
@media (width >= 768px) {
  .about-concept__image-item--left {
    grid-area: image-left;
    margin-right: 86px;
    text-align: right;
  }
}
@media (width >= 768px) {
  .about-concept__image-item--right {
    grid-area: image-right;
    margin-left: 60px;
  }
}
.about-feature {
  margin-top: 50px;
}
.about-feature__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 15px;
}
@media (width >= 768px) {
  .about-feature__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
  }
}
.about-feature__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  row-gap: 10px;
}
.about-feature__item-title {
  font-size: 2rem;
  color: #cf7b23;
}
.about-feature__item-text {
  margin-top: 15px;
}
.about-feature__item-image {
  width: 100%;
  border-radius: 10px;
}
.about-page-title {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 35px;
}
.about-page-title__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (width >= 768px) {
  .about-page-title__heading {
    flex-direction: row;
    justify-content: center;
  }
}
.about-page-title__heading-text {
  color: var(--COLOR_PRIMARY);
}
.about-page-title__background {
  height: 100px;
}
.about-page-title__background-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-zone {
  margin-top: 50px;
}
.about-zone__group {
  width: fit-content;
  margin-inline: auto;
}
.about-zone__group + .about-zone__group {
  margin-top: var(--SPACING);
}
.about-zone__heading {
  padding: 4px;
  background-color: var(--COLOR_BASE);
  border-radius: 10px;
  text-align: center;
  color: #cf7b23;
  font-size: 2rem;
}
.about-zone__list {
  display: grid;
  gap: 30px 15px;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  margin-top: var(--SPACING);
}
@media (width >= 768px) {
  .about-zone__list {
    display: flex;
    justify-content: center;
    column-gap: 20px;
  }
}
.about-zone__item {
  --color-title: var(--COLOR_PRIMARY);
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  row-gap: 10px;
}
.about-zone__item--1 {
  --color-title: var(--COLOR_ZONE_1_FOREGROUND);
}
.about-zone__item--2 {
  --color-title: var(--COLOR_ZONE_2_FOREGROUND);
}
.about-zone__item--3 {
  --color-title: var(--COLOR_ZONE_3_FOREGROUND);
}
.about-zone__item--4 {
  --color-title: var(--COLOR_ZONE_4_FOREGROUND);
}
.about-zone__item--5 {
  --color-title: var(--COLOR_ZONE_5_FOREGROUND);
}
.about-zone__item--6 {
  --color-title: var(--COLOR_ZONE_6_FOREGROUND);
}
@media (width >= 768px) {
  .about-zone__item {
    max-width: 235px;
  }
}
.about-zone__item-title {
  color: var(--color-title);
  font-size: 2rem;
}
.about-zone__item-text {
  margin-top: 15px;
}
.about-zone__item-image {
  width: 100%;
  border-radius: 10px;
}