.lower-third.lines {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: #fffffa;
  font-size: 4vh;
  background-color: white;

  .lower-container {
    position: absolute;
    top: 75vh;
    background-color: #0003;
    padding: 1vh 1vw 1vh 0;
    display: flex;
    flex-direction: column;
    width: 45vw;
    border-radius: 0 8px 8px 0;
  }

  .message-container {
    position: absolute;
    bottom: 2vh;
    width: 100%;
    text-align: center;
    background-color: #0003;

    .message {
      font-size: 3.5vh;
    }
  }

  .title-container,
  .subtitle-container {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: 'decor text';
    align-items: center;
    position: relative;
    margin-bottom: 1vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .title-decor,
  .sub-decor {
    grid-area: decor;
    height: 4vh;
    width: 100%;
    background-color: #ff6969;
    background: linear-gradient(
                    90deg,
                    rgb(255 105 105 / 100%) 0%,
                    rgb(255 132 132 / 100%) 100%
    );
  }

  .title,
  .subtitle {
    grid-area: text;
    padding-left: 1vw;
    justify-self: right;
    width: fit-content;
  }
}
