Шаблон:Main page/Aavikko/styles.css

Материал из Aavikko
#home-featured {
	width: 100%; /* Ширина на всю страницу */
	height: 200px;
    display: block; /* Чтобы блок занял всю ширину */
    position: relative; /* Если элементы внутри будут позиционированы */
    overflow: hidden; /* Чтобы скрыть выходящие за границы элементы */
}

#home-featured .home-card__background a {
	display: block;
	height: 100%;
}

#home-featured .home-card__background:after {
	top: unset;
	height: 60%;
	background: linear-gradient( to top, #000, transparent );
}

#home-featured .home-card__foreground {
	top: unset;
}

#home-featured .home-card__background img {
    width: 100%; /* Изображение будет адаптироваться по ширине */
    max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */
    height: auto; /* Автоматическая подгонка высоты */
}

.home-card__items {
    position: absolute;
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Корректируем смещение для абсолютного центрирования */
    display: flex;
    justify-content: center; /* Центрируем текст по горизонтали */
    align-items: center; /* Центрируем текст по вертикали */
    width: 100%;
    height: 100%;
    font-size: 8em; /* Изменяй размер текста по необходимости */
    color: white; /* Цвет текста */
    text-align: center;
}