.component-wrapper--type-introduction .component-item--content{
  display: flex;
  flex-wrap: wrap;
}

.component-wrapper--type-introduction .field--name-field-body{
  max-width: 50%;
  width: 100%;
  padding-right: 16px;
}

.component-wrapper--type-introduction .introduction-image{
  max-width: 50%;
  width: 100%;
  padding-left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-left-image,
.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-right-image {
  flex: 0 0 calc(50% - 16px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-left-image .field__item,
.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-right-image .field__item{
  width: 100%;
}

.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-left-image img{
  height: 320px;
  object-fit: cover;
}

.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-right-image img{
  height: 400px;
  object-fit: cover;
}

.component-wrapper--type-introduction .introduction-image .field--name-field-introduction-right-image .field__item:last-child img{
  height: 240px;
  object-fit: cover;
}

.component-wrapper--type-introduction .introduction-image img{
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/*.component-wrapper--type-introduction .introduction-image .field__item:nth-child(2){*/
/*  height: 400px;*/
/*}*/


@media (max-width: 991px) {
  .component-wrapper--type-introduction .field--name-field-body{
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
    padding: 0;
  }
  .component-wrapper--type-introduction .introduction-image{
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .component-wrapper--type-introduction .introduction-image{
    gap: 24px;
  }

  .component-wrapper--type-introduction .introduction-image .field--name-field-introduction-left-image,
  .component-wrapper--type-introduction .introduction-image .field--name-field-introduction-right-image {
    flex: 0 0 calc(50% - 12px);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }
}

@media (max-width: 575px) {
  .component-wrapper--type-introduction .introduction-image .field--name-field-introduction-left-image,
  .component-wrapper--type-introduction .introduction-image .field--name-field-introduction-right-image {
    flex: 0 0 100%;
  }
}