@import "../../../foundations/sass/all";

.delivery-section {
  font-family: Roboto, sans-serif;
  margin: 1rem;
  padding: 2rem 0;

  &__sectionTitle {
    color: $delivery-section-color;
    font-size: $fs-lg;
    font-weight: $h-3-font-weight;
    margin-bottom: 1.688rem;
    padding-left: 10%;
    text-align: left;
  }

  &__content {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    justify-content: center;
    margin: 0 auto;
    max-width: 1400px;  // Clave: limita el ancho máximo
    padding: 0 2rem;
  }

  &__left {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: 600px;  // The text will be not  big. "Important"

    &__title {
      font-family: Roboto, sans-serif;
      font-size: 2.188rem;
      font-weight: 700;
      line-height: 2.564rem;
      margin-bottom: 1rem;

      & > span {
        color: $delivery-section-color;
      }
    }

    & > p {
      font-size: $fs-md;
      font-weight: $fw-normal;
      line-height: 1.6;
      margin: 1rem 0;
    }
  }

  &__image {
    flex-shrink: 0;
    height: auto;
    object-fit: contain;
    width: 28rem;        // Fix size for the image
  }

  &__delivery-order-card {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }
}