/* =====================   ABOUT  ================= */
.about {
   margin-bottom: 7rem;
   padding-bottom: .5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

.about--text {
   background-color: var(--color-teal-green-prime);
   color: var(--color-teal-green-lighter);
   padding: 1rem 2rem;
}

.about--item {
   padding: 1rem;
   background: #fff;
   border-radius: .5rem;
   box-shadow: var(--box-shadow-prime);
   width: 90%;
   min-height: 9rem;
   transition: all .3s ease-in;
   position: relative;
}

.about--item::after {
   position: absolute;
   content: "";
   bottom: 0.5rem;
   right: 1.5rem;
   width: 4.5rem;
   height: 4.5rem;
   background-image: url(../icons/logo_step-taxi_text_180.png);
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 0.3;
   z-index: -1;
}

.about--item:nth-child(odd) {
   transform: translateX(110%);
   background-color: rgba(255, 255, 255, 0.7);
   opacity: 0;
}

.about--item:nth-child(even) {
   transform: translateX(-110%);
   opacity: 0;
}

.about--item__title {
   margin: 0 0 1rem 0.5rem;
   color: var(--color-red-light);
   text-align: left;
}

.about--item__text {
   line-height: 1.4;
   font-size: 1rem;
}

.about--item.about__show {
   transform: translateX(0%);
   opacity: 1;
}

/* ---   48 rem */
@media(min-width: 48rem) {
   .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 6rem auto;
      justify-items: center;
      gap: 1rem 0;
   }

   .about--item {
      min-height: 10rem;
   }

   .about--h2 {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
   }

   .about--text {
      grid-column: 1 / 3;
      grid-row: 2 / 3;
      margin-top: 0;
   }

   .about--item:nth-child(odd).about__show {
      transform: translateX(-2%);
      background-color: #fff;
   }

   .about--item:nth-child(even).about__show {
      transform: translateX(2%);
   }
}