/*
 * Home page (page 11, the front page) in core blocks. See theme/import/BLOCKS-GUIDE.md.
 * Each rule stands in for template markup that a core block prints differently.
 */

/* Delivery block (.discount-info). The template's big line is <span class="main-text">
 * with the pink word in an inner <span>. Here it is a Heading (h2.main-text), and the
 * pink word is bold text: select a word and press Bold (Ctrl+B) to mark it.
 * The h2 rule's 54px line height would squeeze the 100px text, so the heading takes
 * the line height the span had. */
.discount-info h2.main-text {
	line-height: inherit;
}
.discount-info .main-text strong,
.main-block .main-text strong {
	position: relative;
	font-weight: inherit;
	color: #d05278;
}
.discount-info .main-text strong:before,
.main-block .main-text strong:before {
	content: "";
	position: absolute;
	left: 45%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 181px;
	height: 155px;
	background-image: url(../../img/main-text-decor.png);
	-webkit-background-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

/* The small delivery-time paragraph under the delivery price, spaced as on About us
 * (.discount-about ... p.discount-info__sm). */
.discount-info > p + p.discount-info__sm {
	margin-top: 23px;
}

/* Info blocks (.info-blocks__item). The picture is an Image block; its <figure>
 * steps out of the layout so the <img> fills the half as in the template.
 * Not in the editor, where the figure is the block you click. */
.info-blocks__item-img > .wp-block-image:not(.block-editor-block-list__block) {
	display: contents;
}
/* In the editor the figure stays in place, so it fills the half itself. */
.info-blocks__item-img > .wp-block-image.block-editor-block-list__block {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* The lead line is <span class="info-blocks__item-descr"> in the template and a
 * Paragraph here, so .info-blocks__item-text p would give it the 16px body size.
 * This puts back the span's 20px size, line height and spacing. */
.info-blocks__item-text p.info-blocks__item-descr {
	max-width: 456px;
	margin-top: 31px;
	font-size: 20px;
	line-height: 150%;
}
@media screen and (max-width: 767px) {
	.info-blocks__item-text p.info-blocks__item-descr {
		margin-top: 15px;
	}
}

/* "Read about us": the template's link (a.info-blocks__item-link with an arrow icon,
 * <i class="icon-arrow-lg">) is a Paragraph with the class info-blocks__item-link
 * holding the link, and the arrow is drawn after the link. The template's video icon
 * is left out because the home page has no video. */
.info-blocks__item-text p.info-blocks__item-link {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 35px;
	font-size: 14px;
	line-height: 100%;
	color: #222222;
}
.info-blocks__item-link a {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	color: inherit;
}
.info-blocks__item-link a:after {
	content: "\e903";
	margin-left: 19px;
	font-family: "icomoon" !important;
	font-size: 51px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-transform: none;
	color: #222222;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.info-blocks__item-link:hover a:after {
	margin-left: 25px;
}