/* ... общие стили для body и .container остаются без изменений ... */

body {
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  background-color: #f4f4f4;
}

/* Стили для главного контейнера */
/* 1. Основной контейнер */
.container {
    /* 1.1. Ширина 90% от родительского элемента */
    width: 90%;
    /* 1.2. Центрирование по горизонтали (классический и надежный способ) */
    margin: 0 auto;
    /* 1.4. Для наглядности (можно удалить) */
    min-height: 300px;
}

/* 2. Внутренний блок с текстом */
.inner-text-block {
    /* 2.1. Текст внутри блока будет по центру */
    text-align: center;

    /* 2.2. Стили для наглядности (можно удалить) */
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
}






.container a {
  font-weight: 300;
  color: #999;
}

/* НОВИНКА: Стили для общего контейнера */
.editor-container {
    display: flex; /* Включаем Flexbox */
    gap: 20px; /* Отступ между прямоугольником и формой */
    align-items: flex-start; /* Выравниваем элементы по верхнему краю */
    position: relative;
    width: 500px;
    height: 360px;
    margin: 0 auto;
    margin-top: 150px;
}

/* НОВИНКА: Стили для общего контейнера */
.row-container {

    position: relative;
    width: 500px;
    margin: 0 auto;
}

.text-center {
  text-align: center;
}

h1 {
  font-size: 14px;
  font-weight: 100;
}

.mblock {
  margin-top: 200px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
  }

  .mt {
    margin-top: 50px;
  }

.block-item {
  background: #C9C9C9;
  padding: 40px 20px;
}

.block-item a {
  color: #000
}

.block-item a:hover {
  text-decoration: none;
}




.block-ads {
  background: #cecece;
  padding: 20px;

  font-weight: 300;
  font-size: 14px;
  display: flex;
  gap: 20px;
}
.block-ads .text {
  line-height: 200%;
}


.block-create {
    margin-top: 30px;
    text-align: center;
}
.block-create, .block-create a {
  color: #838383;
  font-size: 14px;
  font-weight: 100;
}

.block-create a:hover {
  text-decoration: none;

}


/* Стили для ссылки-контейнера */
.back-arrow-link {
    /* 1. Фиксируем ссылку в углу */
    position: fixed; /* или 'absolute', если нужен относительно родителя */
    top: 20px;       /* Отступ от верхнего края */
    left: 20px;      /* Отступ от левого края */

    /* 2. Задаем размеры области нажатия */
    width: 40px;
    height: 40px;

    /* 3. Центрирование содержимого */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 4. Убираем стандартное подчеркивание ссылки */
    text-decoration: none;

    /* 5. Добавляем эффект при наведении */
    transition: transform 0.2s ease; /* Плавный эффект при наведении */
}

/* Стили для самой стрелки */
.back-arrow-link .back-arrow {
  width: 20px;
  height: 20px;
  background-color: #c0c0c0; /* Серый фон */

  /* "Вырезаем" форму стрелки из квадрата */
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}

/* Эффект при наведении на всю область ссылки */
.back-arrow-link:hover {
    transform: scale(1.1); /* Немного увеличиваем кнопку при наведении */
}



  /* 3. Адаптивность для мобильных устройств */
  @media (max-width: 768px) {
      .container {
          /* 3.1. На экранах до 768px (планшеты, телефоны) ширина становится 98% */
          width: 98%;
      }
      .row-container {
          position: relative;
          width: 100%;
          margin: 0 auto;
      }
      .mblock {
          margin-top: 20px;
          grid-template-columns: 1fr;
      }
      .mt {
        margin-top: 50px;
      }

  }