.your-text-block-class {
    position: absolute; /* Позиционируем текст абсолютно */
    top: 50%; /* Размещаем текст на половине высоты блока с изображением */
    left: 50%; /* Размещаем текст на половине ширины блока с изображением */
    transform: translate(-50%, -50%); /* Сдвигаем текст обратно на половину его собственной ширины и высоты, чтобы он был точно по центру изображения */
}


.image-portfolio2::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}

.image-portfolio2::after {
    content: "Церемония награждения победителей корпоративной премии";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio2::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}

.image-portfolio3::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}

.image-portfolio3::after {
    content: "Иммерсивно-концертное шоу на Ледовой Арене";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio3::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}

.image-portfolio4::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}


.image-portfolio4::after {
    content: "День рождения курорта «Игора»";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio4::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}

.image-portfolio5::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}


.image-portfolio5::after {
    content: "Новый год для ГСП-Механизации";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio5::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}

.image-portfolio6::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}


.image-portfolio6::after {
    content: "Открытие новой котельной в г. Кировск";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio6::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}

.image-portfolio7::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}


.image-portfolio7::after {
    content: "Частный юбилейный вечер";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio7::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}

.image-portfolio8::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.23); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}

.image-portfolio8::after {
    content: "Family Day";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 2px;
    font-size: 1.9rem; /* Размер текста в процентах от ширины окна браузера */
}

@media only screen and (max-width: 768px) {
    .image-portfolio8::after {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem; /* Увеличиваем размер текста для маленьких экранов */
    }
}