.mask__background img {
  width: 100%;
}

@media (min-width: 1440px) {
  .mask {
    display: grid;
    grid-template-areas: 'back forth';
    grid-template-columns: repeat(25, 1fr);
    height: calc(100vh - 160px);
    overflow: hidden;
  }

  .mask__background {
    grid-area: back;
    grid-column: 1/26;
  }

  .mask__background img {
    object-fit: cover;
    height: 100%;
    max-height: 100vh;
    vertical-align: bottom;
  }

  .mask__foreground {
    grid-area: forth;
    color: var(--primary--contrast);
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: calc(100vh - 160px);
  }
}

@media (min-width: 1661px) {
  .mask__foreground {
    grid-column: 1/15;
  }
}

@media (min-width: 1440px) and (max-width: 1660px) {
  .mask__foreground {
    grid-column: 1/15;
  }
}