How to change the background of a block when hovering over a link?

Question

css

Hello, I have a code. You need to make sure that when you hover over the "GET STARTED" link, the .package-info background turns white. How to implement?
SCSS

<div class="package">
    						<div class="package-header">
    							10 hour package
    						</div>
    						<div class="package-info">
    							<p class="subtitle">
    								<span>Save 8%</span> on 10 hours of lessons 
    							</p>
    							<p class="title">
    								<span>&#8364;</span> 400.00
    							</p>
    							<a href="#">
    								Get started <i class="fas fa-long-arrow-alt-right"></i>
    							</a>
    							<img src="img/clock2.png" alt="">
    						</div>
    					</div>

.package {
          border-radius:10px;
          .package-header {
            background: linear-gradient(90deg, rgba(246,34,33,1) 0%, rgba(232,22,28,1) 50%, rgba(209,0,17,1) 100%);
            height: 95px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 23px;
            @extend .bold;
            color: #fff;
            border-radius: 10px 10px 0px 0px;
            text-transform: uppercase;
          }
          .package-info {
            padding: 30px 60px 35px 35px;
            background: #f7f7f7;
            position: relative;
            border-radius: 0px 0px 10px 10px;
            .subtitle {
              font-size: 16px;
              color: #333;
              margin: 0 0 15px;
              span {
                @extend .semi-bold;
              }
            }
            .title {
              font-size: 30px;
              @extend .bold;
              position: relative;
              margin: 0 0 90px;
              span {
                font-size: 23px;
              }
              &:after {
                content: '';
                position: absolute;
                width: 58px;
                height: 1px;
                background: #f0f0f0;
                left: 0;
                bottom: -40px;
              }
            }
            a {
              text-transform: uppercase;
              @extend .semi-bold;
              i {
                color: #e3111a;
                margin: 0 0 0 22px;
              }
              &:hover {
                color: #e3111a;
              }
            }
            img {
              position: absolute;
              right: 18px;
              bottom: 25px;
              display: block;
            }
          }
        }

Answer 1

CSS does not know how to reverse selectors to the parent, and SCSS will eventually compile to CSS anyway, so that you can use the hover state - the element that is under this state must be either a parent or an older neighbor.
or

.el:hover > .children {
  ...
}

or

.el:hover + .el {
  ...
}

To do what you want, you need to use either JS or change the architecture of the application in such a way that in the stream the link is either a neighbor above or a parent.