@import "./variables.css";

/* ==============================================================
   about-staff Page
   ============================================================== */

.about-staff__wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 80px;
}

.about-staff__fv {
   padding-top: 40px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.about-staff__fv-img {
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
}

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

@media (max-width: 480px) {
   .about-staff__fv-img {
      width: 100%;
      aspect-ratio: 1/1;
   }

   .about-staff__fv-img img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 1/1;
   }
}

.about-staff__first-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 44px;
   width: 100%;
}

.p-visual-card_3__image-group {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.p-visual-card_3__image-group .p-visual-card_3 {
   width: 100%;
}

.about-staff__first-section .p-visual-card_3:nth-of-type(2),
.about-staff__first-section .p-visual-card_3:nth-of-type(4) {
   flex-direction: row-reverse;
}

.p-visual-card_3__image-group .p-visual-card_3__image {
   max-width: 50%;
}

@media (max-width: 767px) {
   .p-visual-card_3__image-group .p-visual-card_3 {
      flex-direction: column;
      padding: 24px;
   }

   .p-visual-card_3__image-group .p-visual-card_3__image {
      max-width: none;
      width: 100%;
   }

   .about-staff__first-section .p-visual-card_3:nth-of-type(2),
   .about-staff__first-section .p-visual-card_3:nth-of-type(4) {
      flex-direction: column;
   }

   .p-visual-card_3__image-group .p-visual-card_3__content {
      width: 100%;
      gap: 16px;
   }
}