section#instruments {
  div.instrument {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 2rem;
    margin: 1rem;
    align-items: center;
    line-height: 1.7rem;
    margin-top: 3rem;

    img {
      max-width: 480px;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  }
}


.introduction {
  padding: 20px;
}

.introduction p {
  margin-bottom: 20px;
}

.image-row {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.image-row img {
  width: 48%;
  border-radius: 10px;
}

.instruments-list {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /*padding: 20px;*/
  font-size: 20px;

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #ccc;
  }

  .left,
  .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 460px;
  }

  .left {
    /*margin-right: 40px;*/
    /*text-align: left;*/

    >span {
      align-self: flex-end;
    }

    span::after {
      content: attr(data-emoji);
      margin-left: 8px;
      margin-right: 10px;
    }
  }

  .right {
    /*margin-left: 40px;*/
    /*text-align: right;*/

    >span {
      align-self: flex-start;
    }

    span::before {
      content: attr(data-emoji);
      margin-right: 8px;
      margin-left: 10px;
    }
  }

  span {
    margin-bottom: 10px;
  }
}


.benefits {
  padding: 20px;
  border-radius: 10px;
  /*margin: 20px 0;*/
}

.benefits h2 {
  text-align: center;
}

.group-lessons {
  padding: 20px;
}

.group-lessons h2,
.group-lessons h3 {
  text-align: center;
}

.benefits-list {
  list-style: none;
  padding: 0;
}

.benefits-list li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.benefits-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
}


@media (max-width: 780px) {

  @media (max-width: 100vw) {
    section#instruments {
      div.instrument {
        /*justify-content: center;*/
        flex-flow: row wrap !important;
        line-height: unset;
        align-items: unset;
        flex-wrap: wrap;
        text-align: justify;

        img {
          max-width: 330px;
        }
      }
    }

    .instruments-list {
      flex-direction: column;
      align-items: unset !important;

      &::before {
        display: none;
      }

      .left,
      .right {
        min-width: unset !important;
      }

      .left {
        >span {
          align-self: flex-start !important;
        }

        span::after {
          content: none !important;
          margin: unset !important;
        }

        span::before {
          content: attr(data-emoji);
          margin-right: 8px;
        }
      }

      .right {
        span::before {
          margin-left: unset !important;
        }
      }
    }
  }

}