media queryによるbackground-imageの変更

/* mobileからつくる */
.hero__image {
    /* margin-top: 6rem; */
    position: relative;
    🤬background-image: url(./images/bg-intro-mobile.svg);
    background-size: cover;
    background-repeat: no-repeat;
    /* 初期設定では左上（0% 0%） */
    background-position: center bottom 20%;
    min-height: 17.5rem;
    min-height: 50rem;
}

最初はこのように書いていて、後からメディアクエリで別のbackground-imageを書いても変わりませんでした。

正しくはそれぞれ別に書く！
こちらの記事で見つけました。ありがとうございました。https://junzou-marketing.com/css-responsive-image

    /* hero */
@media screen and (max-width: 767px) {
  .hero__image {
    🥰background-image: url(./images/bg-intro-mobile.svg);
  }
}

    @media screen and (min-width: 768px) {
      .hero {
        display: flex;
        /* flex-direction: row-reverse; */
        align-items: center;
      }

      .container-fluid {
        max-width: 100%;
      }

      .hero__image {
        /* 👩‍🎓「flex: 1;」は、「flex-grow: 1;」、「flex-shrink: 1;」、「flex-basis: 0;」の3つ同時に指定 */
        flex: 1;
        /* イコール */
        order: 2;
        🥰background-image: url(./images/bg-intro-desktop.svg);
      }

      .hero__text {
        flex: 1;
      }
    }