<div class="wall">
    <div class="row"><span>кубок</span><span>Сахалина</span><span>2024</span><span>хоккей</span><span>турнир</span></div>
    <div class="row"><span>дальний</span><span>восток</span><span>2024</span><span>хоккей</span><span>спорт</span><span>сахалинская</span><span>область</span></div>
    <div class="row"><span>адреналин</span><span>восторг</span><span>страсть</span><span>единство</span></div>
    <div class="row"><span>трус</span><span>не</span><span>играет</span><span>в</span><span>хоккей</span></div>
    <div class="row"><span>АРСО</span><span>правительство</span><span>сахалинской</span><span>области</span><span>дворец</span><span>спорта</span><span>кристалл</span></div>
</div>
<div class="container">
 
    <div class="hero">
         <div class="hero__tagline">ледовая площадка арены «Кристалл»</div>
        <div class="hero__title"> <span>2025 год</span>
            <br> КУБОК  САХАЛИНА</div>
        <div class="hero__subtitle">Турнир Сахалинской области по хоккею среди любительских команд</div>
        <div class="hero__subtitle">с 03 по 06 июня 2025 года 
        <br><br>
        <div class="content">
<img src="https://static.tildacdn.com/tild6133-3462-4036-b363-623066653764/Asset_114x2.png" width="90" height="90">
     <div class="text">
       Все средства, вырученные от турнира, будут переданы в Благотворительный фонд 
          <a href="https://шагинавстречу.рф/about/" target="_blank"><strong>«ШАГИ НАВСТРЕЧУ»,</strong></a> <br>
 созданный для помощи детям с ограниченными возможностями здоровья.
	
     </div>
</div>      
        
        </div>
    </div>

.wrapper::before {
  content: "";
  width: 100;
  height: 50vh;
    display: block;
  background-image: url("https://static.tildacdn.com/tild6165-3765-4266-b032-646164396238/__-ready.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body {
  height: 100vh;
  overflow: hidden;
}



.wall {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.row {
  z-index: -99;
  display: flex;
  animation: 200s linear ticker-to-left infinite;
  
  &:nth-child(even) {
    animation: 60s linear ticker-to-right infinite;
    justify-content: flex-end;
  }

  span {
    margin-right: 0.2em;
    font-family: sans-serif;
    color: transparent;
    font-size: 20vh;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    -webkit-text-stroke-width: 4px;
            text-stroke-width: 4px;
    -webkit-text-stroke-color: #f5f5f5;
            text-stroke-color: #f5f5f5;
  }
  
}

@keyframes ticker-to-left {
    0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes ticker-to-right {
    0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}


/* Unrelated to demo */

@import 'https://fonts.googleapis.com/css?family=Montserrat:800|Caveat:800|Tablon:400';

.container {
    position: absolute;
    width: 100vw;
    height: 112vh;
    z-index: 99;
}

.hero {
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    height: 100%;
	font-size: 1.2em;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.hero__tagline {
	margin: 0 0 1rem 0;
}

.hero__title {
    font-family: "New_Zelek";
    font-weight: 400;
    letter-spacing: 2px;
	font-size: 2rem;
    text-align: center;
    text-transform: uppercase;
    
    span {
        color: #4FA5C0;
        -webkit-text-stroke-width: thin;
                text-stroke-width: thin;
        -webkit-text-stroke-color: #000;
              
        
        &:hover {
            -webkit-text-stroke-color: #4FA5C0;
                    text-stroke-color: #4FA5C0;
        }
    }
}

.hero__subtitle {
	font-size: 1 rem;
    margin: 1rem 0 0 0;
    text-align: center;
}


.content {
display:flex;
align-items: center;
justify-content: center;
}

.text {
  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
  color: #E51D3E;
   
}  
    
    
img {
  max-width: auto;
  height: auto;
  
}

.text > a strong {
 text-decoration: none;
 display: inline-block;
 color: #E51D3E;
 font-weight: 700;
  
}

.text > a strong {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
      transform: scale(0.9); /* Увеличиваем масштаб */
  }

  to {
      transform: scale(1); /* Увеличиваем масштаб */
  }
}