/* ==========================================================================

   Pattern: Text Media

   WIO Presentation System

   Mobile First

   ========================================================================== */

.text-media {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}

.text-media__title {

  width: 100%;

}

.text-media__items {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}

.text-media__text + .text-media__text {
  margin-top: -2rem;
}

.text-media__text {

  flex: 1;

}

.text-media__media {

  flex: 1;

  width: 80vw;

  max-width: 80vw;

  margin: 0 auto;

}

.text-media__media img {

  display: block;

  width: 100%;

  height: auto;

  margin-bottom: 0.5rem;

  border: 2px solid var(--theme-color-primary);
  border-radius: 8px;

}

.text-media__caption {

  font-size: 0.85rem;

  line-height: 1.4;

  opacity: 0.7;

}


/* --------------------------------------------------------------------------

   Tablet & Desktop

   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .text-media {

    flex-direction: column;

    gap: 3rem;

  }

  .text-media__items {

    gap: 0rem;

  }

  .text-media__media {

    width: 80vw;

    max-width: 80vw;

    margin: 0 auto;

  }

  .text-media__media img {

  width: 60%;

}

}