:root{
  --bg-color: #f2f4f5;
  --accent: #0f6a6f; /* тёмно-бирюзовый для текста */
  --tile-bg-1: rgba(220,240,242,0.9);
  --tile-radius: 28px;
  --decor-image: url('attachments/Background/Risunok1.png'); /* <- замените на ваш путь к изображению */
}

@font-face {
    font-family: 'BebasNC';
    src: url('../fonts/bebasneuecyrillic.ttf') format('ttf');
} 


*{
    box-sizing:border-box
}

html,body{
    height:100%;
    margin:0;
    font-family:"BebasNC"; 
    background:var(--bg-color); color:#222;
}

/* Центрируем общий контейнер и задаём градиент/световую заливку по центру */
.page{
  min-height:100vh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  padding:50px;
  background-image: var(--decor-image);
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment:fixed;
}

/* Основная обёртка: две колонки — контент слева и декоративная картинка справа */
.wrap{
  width:90%;
  /* max-width:1200px; */
  display:grid;
  grid-template-columns: 1fr 490px;
  align-items:center;
}

.paw{
  display: flex;
  justify-content: center;
}

/* Левая колонка (контент) */
.content{
  padding:8px 10px;
}

/* Плитки (tiles) */
.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-bottom:28px;
}

.tile{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  background: #61b4b917;
  border-radius:var(--tile-radius);
  /* text-decoration:none; */
  color:var(--accent);
  font-size:40px;
  font-weight: bold;
  text-transform:uppercase;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), inset 0 0 0 1px rgba(255,255,255,0.4);
  position:relative;
  padding:10px 14px;
  text-align:center;
}

.tiles-name{
  display: flex;
  align-items: center;
  text-align: center;
}

/* Заголовок */
.hero-title{
  color:var(--accent);
  margin:8px 0 28px 0;
  line-height:1.02;
  letter-spacing:1px;
  font-size: xxx-large;
  font-weight:700;
  padding-left: 20px;
}

.main-title{
  color:var(--accent);
  margin:8px 0 28px 0;
  line-height:1.02;
  letter-spacing:1px;
  font-weight:700;
  padding-left: 20px;
  text-align: center;
}

/* Правая декоративная часть */
.decor{
  height:100%;
  min-height:320px;
  background-image: var(--decor-image);
  background-repeat:no-repeat;
  background-position: center right;
  background-size: contain;
  /* если нет изображения — тонкие ноты с правой стороны можно заменить градиентом */
}

/* Медиа: планшет */
@media (max-width:1000px){
  .wrap{ grid-template-columns: 1fr 320px; gap:20px; }
  .tiles .tile{ min-height:78px; font-size:16px; }
}

/* Медиа: узкие экраны — стек */
@media (max-width:780px){
  .wrap{ grid-template-columns: 1fr; }
  .decor{ order:2; height:180px; background-position:center; background-size:cover; opacity:0.9; }
  .tiles{ grid-template-columns: repeat(2, 1fr); }
  .hero-title{ font-size: clamp(26px, 8vw, 48px); text-align:center; }
  .content{ order:1; padding:0 6px; }
}

/* Мобильный вид: одна колонка плиток */
@media (max-width:420px){
  .tiles{ grid-template-columns: 1fr; gap:12px; }
  .tile{ min-height:70px; font-size:15px; }
  .hero-title{ font-size: clamp(22px, 10vw, 36px); }
  .decor{ display:none; } /* скрываем декоративное изображение для экономии места */
}