Шаблон: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__foreground {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(0.25 * 1rem);
	color: #fff;
	line-height: 1.25;
}