body {
  background-image: url('imgs/RosticWlp.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* background: #232136; */
  color: #6febc6;
  font-family: 'Cartograph', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  text-shadow: 2px 2px 4px rgb(44, 56, 126);
}

@font-face {
  font-family: 'Cartograph';
  src: url('https://github.com/g5becks/Cartograph/raw/refs/heads/main/CartographCF-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

::selection {
  background: #f6c177;
}

.urls {
  color: #c4a7e7;
}

.center {
  text-align: center;
}

.text-muted {
  color: #6e6a86;
}

.ultra-stretch {
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  object-position: center;
  display: block;
}

.button {
  width: 50vw;
}

.les-flag {
  /* Убираем стандартную рамку */
  border: none;
  
  /* Задаем высоту "линии" */
  height: 20px; 
  
  /* Растягиваем на всю ширину */
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* Хай-тек центрирование, если родитель имеет отступы */
  
  /* Рисуем флаг градиентом */
  background: linear-gradient(to bottom, 
    #D52D00 0%, 14.2%,   /* Темно-оранжевый */
    #EF7627 14.2%, 28.4%, /* Оранжевый */
    #FF9A56 28.4%, 42.6%, /* Светло-оранжевый */
    #FFFFFF 42.6%, 56.8%, /* Белый */
    #D162A4 56.8%, 71%,   /* Розовый */
    #B55690 71%, 85.2%,   /* Насыщенный розовый */
    #A30262 85.2% 100%    /* Темно-розовый */
  );

  /* Чтобы линия не прилипала к тексту */
  margin-top: 20px;
  margin-bottom: 20px;
}

.image-row {
  display: flex;          /* Выстраивает детей в ряд */
  justify-content: space-between; /* Делает равные отступы между картинками */
  gap: 15px;             /* Расстояние между колонками */
  padding: 20px;
}

.image-row figure {
  margin: 0;             /* Убираем стандартные отступы браузера */
  flex: 1;               /* Каждая фигура занимает равную часть ширины */
  text-align: center;    /* Центрируем текст и картинку внутри */
}

.image-row img {
  width: 100%;           /* Картинка растягивается на всю ширину своей колонки */
  height: auto;          /* Сохраняем пропорции */
  border-radius: 8px;    /* Можно немного скруглить углы для красоты */
  object-fit: cover;     /* Если картинки разного размера, они подрежутся под один формат */
}

.image-row figcaption {
  margin-top: 10px;      /* Отступ между картинкой и текстом */
  font-size: 14px;
}

@media (max-width: 768px) {
  .image-row {
    flex-wrap: wrap;     /* Разрешаем перенос на новую строку */
  }
  
  .image-row figure {
    flex: 1 1 calc(50% - 15px); /* По 2 картинки в ряд на планшетах */
  }
}

@media (max-width: 480px) {
  .image-row figure {
    flex: 1 1 100%;      /* По 1 картинке в ряд на маленьких телефонах */
  }
}