.about-section { width: 100%; padding-left: 0; padding-right: 0; padding-top: 0; margin-bottom: 30px; }

.about-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 40px; }
@media (min-width: 768px) { .about-row { gap: 48px; } }
@media (min-width: 1024px) { .about-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 40px; } }
@media (min-width: 1280px) { .about-row { column-gap: 60px; } }

.about-row--vision .about-text-col { order: 1; }
.about-row--vision .about-image-col { order: 2; }

@media (min-width: 1024px) {
  .about-row--vision .about-image-col { order: 0; grid-column: 1; grid-row: 1; }
  .about-row--vision .about-text-col  { order: 0; grid-column: 2; grid-row: 1; }
}

.about-text-col { width: 100%; display: flex; flex-direction: column; gap: 24px; }

.about-image-col { width: 100%; border-radius: 3px; overflow: hidden; height: 300px; }
@media (min-width: 768px) { .about-image-col { height: 400px; } }
@media (min-width: 1024px) { .about-image-col { height: 462px; } }

.about-img { width: 100%; height: 100%; object-fit: cover; }

.about-detail-arrow {
    position: absolute;
    top: -18px;
    height: 0px;
    width: 0px;
    border-left-width: 20px;
    border-right-width: 20px;
    border-bottom-width: 20px;
    border-left-color: transparent;
    border-right-color: transparent;
    --tw-border-opacity: 1;
    border-bottom-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.about-card.is-active .about-card-img::after {
      content: "";
      position: absolute;
      left: 30px;
      bottom: 0px;
      width: 0; height: 0;
      border-left: 16px solid transparent;
      border-right: 16px solid transparent;
      border-bottom: 16px solid #ffffff;
      z-index: 10;
  }