/**
 * AMP MICI — Blog Responsive
 */

/* =========================================================
   Laptop
========================================================= */

@media (max-width: 1120px) {
	.ampmici-blog-page {
		--amp-blog-sidebar-width: 270px;
		--amp-blog-gap: 24px;
	}

	.ampmici-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ampmici-blog-hero {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(280px, 0.68fr);
	}
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 900px) {
	.ampmici-blog-page {
		padding-bottom: 56px;
	}

	.ampmici-blog-container,
	.ampmici-blog-hero {
		width: min(
			calc(100% - 28px),
			var(--amp-blog-container)
		);
	}

	.ampmici-blog-hero {
		grid-template-columns: 1fr;

		min-height: 0;
		margin-top: 22px;

		border-radius: 27px;
	}

	.ampmici-blog-hero__content {
		padding: 34px 29px;
	}

	.ampmici-blog-hero__visual {
		order: -1;

		min-height: 230px;
		max-height: 310px;
	}

	.ampmici-blog-hero__image {
		width: 100%;
		min-height: 230px;
		max-height: 310px;

		object-fit: cover;
		object-position: center;
	}

	.ampmici-blog-hero__icon {
		width: 92px;
		height: 92px;

		border-radius: 24px;
	}

	.ampmici-blog-hero__icon svg {
		width: 44px;
		height: 44px;
	}

	.ampmici-blog-layout {
		grid-template-columns: 1fr;

		grid-template-areas:
			"main"
			"sidebar";

		gap: 34px;

		margin-top: 30px;
	}

	.ampmici-blog-sidebar {
		align-self: auto;
	}

	.ampmici-blog-sidebar__inner {
		position: static;
		top: auto;

		max-height: none;
		padding-inline-end: 0;

		overflow: visible;
	}

	.ampmici-blog-sidebar .widget-area,
	.ampmici-blog-sidebar .primary-sidebar,
	.ampmici-blog-sidebar .sidebar-inner-wrap,
	.ampmici-blog-sidebar .sidebar-inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 17px;
	}

	.ampmici-blog-sidebar .widget {
		margin: 0;
	}
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 640px) {
	.ampmici-blog-page {
		padding-bottom: 44px;
	}

	.ampmici-blog-container,
	.ampmici-blog-hero {
		width: min(
			calc(100% - 20px),
			var(--amp-blog-container)
		);
	}

	.ampmici-blog-hero {
		margin-top: 14px;

		border-radius: 23px;
	}

	.ampmici-blog-hero__visual {
		min-height: 175px;
		max-height: 210px;
	}

	.ampmici-blog-hero__image {
		width: 100%;
		min-height: 175px;
		max-height: 210px;

		object-fit: cover;
		object-position: center;
	}

	.ampmici-blog-hero__icon {
		width: 76px;
		height: 76px;

		border-radius: 20px;
	}

	.ampmici-blog-hero__icon svg {
		width: 37px;
		height: 37px;
	}

	.ampmici-blog-hero__shape.is-orange {
		top: 28px;
		right: 45px;

		width: 43px;
		height: 43px;
	}

	.ampmici-blog-hero__shape.is-green {
		bottom: 28px;
		left: 38px;

		width: 48px;
		height: 48px;
	}

	.ampmici-blog-hero__content {
		padding: 27px 21px 29px;
	}

	.ampmici-blog-hero__kicker {
		margin-bottom: 11px;
		padding: 6px 10px;

		font-size: 0.69rem;
	}

	.ampmici-blog-hero__title {
		font-size: clamp(2rem, 10vw, 2.7rem);
		line-height: 1.22;
	}

	.ampmici-blog-hero__description {
		margin-top: 13px;

		font-size: 0.87rem;
		line-height: 1.85;
	}

	.ampmici-blog-hero__meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;

		width: 100%;
		margin-top: 21px;
	}

	.ampmici-blog-hero__meta-item {
		min-width: 0;
		min-height: 44px;
		padding: 7px 9px;
	}

	.ampmici-blog-hero__meta-icon {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}

	.ampmici-blog-hero__meta-item small {
		font-size: 0.58rem;
	}

	.ampmici-blog-hero__meta-item strong {
		font-size: 0.66rem;
	}

	.ampmici-blog-layout {
		gap: 28px;
		margin-top: 25px;
	}

	.ampmici-blog-section-header {
		margin-bottom: 16px;
	}

	.ampmici-blog-section-header__title {
		font-size: 1.4rem;
	}

	.ampmici-blog-section-header__description {
		font-size: 0.81rem;
		line-height: 1.75;
	}

	/* Cards */

	.ampmici-blog-grid {
		grid-template-columns: 1fr;
		gap: 13px;
	}

	.ampmici-blog-page .ampmici-article-card {
		display: grid;
		grid-template-columns: 118px minmax(0, 1fr);

		min-height: 160px;

		border-radius: 18px;
	}

	.ampmici-blog-page .ampmici-article-card__media {
		width: 118px;
		height: 100%;
		min-height: 160px;

		aspect-ratio: auto;
	}

	.ampmici-blog-page .ampmici-article-card__body {
		min-width: 0;
		padding: 14px;
	}

	.ampmici-blog-page .ampmici-article-card__category {
		margin-bottom: 5px;

		font-size: 0.66rem;
	}

	.ampmici-blog-page .ampmici-article-card__title {
		font-size: 0.9rem;
		line-height: 1.55;
	}

	.ampmici-blog-page .ampmici-article-card__excerpt {
		margin-top: 6px;

		font-size: 0.72rem;
		line-height: 1.55;
	}

	.ampmici-blog-page .ampmici-article-card__footer {
		gap: 6px;
		padding-top: 9px;
	}

	.ampmici-blog-page .ampmici-article-card__meta {
		font-size: 0.61rem;
	}

	.ampmici-blog-page .ampmici-article-card__read-more {
		font-size: 0.68rem;
	}

	/* Sidebar */

	.ampmici-blog-sidebar .widget-area,
	.ampmici-blog-sidebar .primary-sidebar,
	.ampmici-blog-sidebar .sidebar-inner-wrap,
	.ampmici-blog-sidebar .sidebar-inner {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ampmici-blog-sidebar .widget {
		padding: 19px;

		border-radius: 18px;
	}
}

/* =========================================================
   Very Small Phones
========================================================= */

@media (max-width: 390px) {
	.ampmici-blog-hero__meta {
		grid-template-columns: 1fr;
	}

	.ampmici-blog-page .ampmici-article-card {
		grid-template-columns: 100px minmax(0, 1fr);
	}

	.ampmici-blog-page .ampmici-article-card__media {
		width: 100px;
	}

	.ampmici-blog-page .ampmici-article-card__excerpt {
		display: none;
	}
}

/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.ampmici-blog-page *,
	.ampmici-blog-page *::before,
	.ampmici-blog-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}