section.mod_smooth_magazine{
	h2.bloqTitle{
		max-width: 1000px;
		margin: 0 auto;
		padding-bottom: 20px;
	}
	div.Magazine{
		max-width: 1000px;
		margin: 0 auto;
		isolation: isolate;
		ul{
			position: relative;
			li{
				.Item{
					.ItemBefore{
						width: 35%;
						min-width: 35%;
						aspect-ratio: 1 / 1;
						border-radius: 50%;
						padding-bottom: 35%;
					}
					.ItemInner{
						.ItemIcon{
							display: none;	
						}
					}
				}
				.Item.hasJS{
					position: static;
					.ItemBefore{
						position: absolute;
						top: 0;
						left: 0;
						width: 35%;
						min-width: 35%;
						height: 100%;
						min-height: 100%;
						max-height: 100%;
						background-image: none;
						transition: 0.3s;
						z-index: var(--item-num);
						aspect-ratio: unset;
						border-radius: 0;
						padding-bottom: 0;
						.sticky{
							width: 100%;
							aspect-ratio: 1 / 1;
							display: block;
							position: sticky;
							top: calc(50vh - 150px);
							img{
								border-radius: 50%;
								width: 100%;
								height: 100%;
								object-fit: cover;
								display: block;
							}
							.circle{
								position: absolute;
								bottom: -10px;
								right: 0;
								width: 100px;
								height: 100px;
								background-color: rgb(var(--color1));
								border-radius: 50%;
								display: block;
								.line{
									content: '';
									background-color: rgb(var(--grey10));
									width: 1px;
									height: 50px;
									position: absolute;
									top: 25px;
									left: 50%;
									transform: rotate(45deg);
								}
								&::before{
									counter-reset: variable var(--item-num);
    								content: counter(variable);
									color: rgb(var(--grey10));
									position: absolute;
									top: 17px;
									left: 7px;
									width: 60px;
									height: 30px;
									font-size: 20px;
									display: grid;
									place-items: center;
								}
								&::after{
									counter-reset: variable var(--total-items);
    								content: counter(variable);
									color: rgb(var(--grey10));
									position: absolute;
									bottom: 17px;
									right: 7px;
									width: 60px;
									height: 30px;
									font-size: 20px;
									display: grid;
									place-items: center;
								}
							}	
						}
					}
					.ItemInner{
						padding-left: calc(35% + 5vw);
						transition: 0.3s;
					}
					&.fadedhide{
						.ItemBefore{
							opacity: 0;	
						}
						.ItemInner{
							opacity: 0.2;
						}
					}
				}
				&:first-child{
					.Item{
						.ItemBefore{
							opacity: 1;	
						}
					}
					
				}
			}
		}
	}
}


@media screen and (max-width: 600px) {
    section.mod_smooth_magazine div.Magazine .Item .ItemBefore{
		width: 200px !important;
		height: 200px;
	}
    section.mod_smooth_magazine div.Magazine .Item.hasJS .ItemBefore{
        min-width: 35% !important;
		width: 35% !important;
		position: absolute;
		top: 0;
		.sticky{
			.circle{
				bottom: -20px !important;
				width: 60px !important;
				height: 60px !important;
				.line{
					height: 30px !important;
					top: 15px !important;
				}
				&::before{
					width: 40px !important;
					top: 4px !important;
					left: 3px !important;
					font-size: 12px !important;
				}
				&::after{
					width: 40px !important;
					bottom: 4px !important;
					right: 3px !important;
					font-size: 12px !important;
				}
			}	
		}
    }
    section.mod_smooth_magazine div.Magazine .Item.hasJS .ItemInner{
		padding-top: 0;
	}
}