.publication-grid {
	display: grid; grid-template-columns: 1fr; gap: 48px;

	& > main {
		display: grid; grid-template-columns: 1fr; gap: 16px 0px;

		& > div {
			/* outline: 1px dashed #0006; */

			&:nth-child(1) {
				position: relative;
				& a { background: none; }

				& img {
					opacity: 0;
					animation-name: anim_scale-in-1;
					animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				}


			}
			&:nth-child(2) {
				display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;

				opacity: 0;
				animation-name: anim_fromLeft-32;
				animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 100ms;

				& div.hh-year-magison {

					display: flex; flex-direction: row; justify-content: start; align-items: center;

					& > span {
						border: 0px solid red; display: block;

						&:nth-child(1) {
							width: 48px;
						}
						&:nth-child(2) {
							padding-right: 2rem; position: relative;
							display: flex; flex-direction: row; justify-content: space-between; align-items: center;
						}

						&:nth-child(3) {
							padding-right: 2rem; position: relative;
							display: flex; flex-direction: row; justify-content: space-between; align-items: center;
						}

						& a {
							position: absolute; right: 0; top: -3px;
							width: 48px; height: 48px; display: none;
							border-radius: 50%; overflow: hidden;
							border: 0px solid red;
							& svg {
								position: absolute; left: -1px; right: -1px; top: -1px; bottom: -1px;
								width: 50px; height: 50px;
							}
						}
					}

				}

				& h1 {
					/* outline: 1px solid red; */
					font-size: 2rem; margin: 0; padding: 0; min-height: 160px;

					& span {display: block; line-height: 2rem; margin-bottom: 0rem; }
					& small { display: block; font-size: 1.2rem; }
				}

				& div.hh-support-magison {
					position: relative;
					display: flex; flex-direction: row; justify-content: space-between; align-items: center;
					/* outline: 1px solid red; */
					padding: 12px 0 12px 48px;

					& > span {
						/* outline: 1px solid red; padding: 6px 4px; */
						& > span {
							/* outline: 1px solid red; */
							padding: 0 12px 0 0;
						}
					}


					& a.btn-disqoulivr { position: absolute; left: 9px; top: 7px; }

				}


			}
			&:nth-child(3) {
				padding: 0 0;

				opacity: 0;
				animation-name: anim_opacity-in;
				animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 100ms;

				& ul.mini-oeuvre-menu-1 {
					display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;

					& li > a {
						position: relative;
						display: block; font-size: 0; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%;
					}

					& li > a[aria-current] {
						background-color: #f3f3f3!important;
						outline: 2px solid #000; outline-offset: -1px;
						pointer-events: none;
					}
				}
				& ul.mini-oeuvre-menu-2 {
					display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;

					& li > a {
						display: block; font-size: 0; aspect-ratio: 3/4; box-sizing: border-box;
					}

					& li > a[aria-current] {
						background-color: #f3f3f3!important;
						outline: 2px solid #000; outline-offset: -1px;
						pointer-events: none;
					}
				}

			}
			&:nth-child(4) {
				position: relative;

				& svg { width: 28px; height: 28px; }


                & div.grid-50-ans {
                  /* outline: 1px solid red; */
                  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
                  & > div {

                    position: relative;
                    aspect-ratio: 1/1;
                    & img { display: block; width: 100%;}
                    & span {
                      font-family: verdana; color: #000A;
                      position: absolute; bottom: 4px; right: 16px; font-size: 10px;
                      &:before {
                        position: absolute; content: 'cd#'; top: 1px; left: -14px; font-size: 7px;
                      }
                    }

                    opacity: 0;
                    animation-name: anim_scale-in-1;
                    animation-duration: 400ms; animation-timing-function: ease; animation-fill-mode: forwards;
                    animation-delay: 200ms;

                    &:nth-child(1) { animation-delay: 600ms; }
                    &:nth-child(2) { animation-delay: 650ms; }
                    &:nth-child(3) { animation-delay: 700ms; }
                    &:nth-child(4) { animation-delay: 750ms; }
                    &:nth-child(5) { animation-delay: 800ms; }
                    &:nth-child(6) { animation-delay: 850ms; }
                    &:nth-child(7) { animation-delay: 900ms; }
                    &:nth-child(8) { animation-delay: 950ms; }
                    &:nth-child(9) { animation-delay: 1000ms; }
                    &:nth-child(10) { animation-delay: 1050ms; }
                    &:nth-child(11) { animation-delay: 1100ms; }
                    &:nth-child(12) { animation-delay: 1150ms; }
                    &:nth-child(13) { animation-delay: 1200ms; }
                    &:nth-child(14) { animation-delay: 1250ms; }
                    &:nth-child(15) { animation-delay: 1300ms; }
                  }
                }

			}
			&:nth-child(5),
			&:nth-child(8) {
				position: relative;
				border: 0px solid cyan; padding: 0;

				opacity: 0;
				animation-name: anim_fromBottom-32;
				animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 200ms;

				& > div {
					padding: 32px 0 32px 48px; border-radius: 7px;
					background: linear-gradient(#fff, #fff0);
				}
			}

			& div.bandcamp-box {
				position: relative; overflow: hidden; margin: 0; border-radius: 7px;
				height: 296px;
				border: 8px solid #fff;

				opacity: 0;
				animation-name: anim_fromBottom-32;
				animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 1500ms;

				& div.bandcamp-inside {
					position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px;
					border: 1px solid grey;
				}

			}

		}
	}
}


div.epuise {
	position: absolute; top: 0; left: 0; bottom: 0; right: 0;
	background: linear-gradient(135deg, #e3ff0000 77%, #e3ff00 77%);
	pointer-events: none;

	& span { display: block; width: 96px; position: absolute; bottom: 0; right: 0; transform: translate(0, -40px) rotate(-45deg); text-align: center; font-weight: 900; }
}

a.gomagison {
	position: absolute; left: 18px; bottom: 18px;
	width: 32px; height: 32px; display: block;
	border-radius: 50%; overflow: hidden;
	outline: 1px solid #fff5;
	& svg {
		position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px;
		width: 36px; height: 36px;
	}
}




/* .img img { box-shadow: 0 0 16px #0002; border-radius: 3px;} */


.h1 .text h1 { outline: 1px solid purple; }
.h1 .text h2 { outline: 1px solid cyan; margin-bottom: 0.25rem; padding: 0; line-height: 1.75rem; }
.h1 .text h3 { outline: 1px solid purple; font-size: 1.4rem; margin-bottom: 0.1rem; }

.spacer-1 { height: 24px}
.spacer-2 { height: 32px}
.spacer-3 { height: 48px}

.ico-support {
	/* position: absolute; bottom: 12px; left: 12px; */
	display: block;
	width: 28px;
	outline: 0px solid #fff2;
}


ul.btn-ancre {
	position: absolute; width: 100%;
	margin-top: -6rem;

	& li {

		& a {
			position: relative; display: block; width: 100%;
			padding-bottom: 4rem;

			&:after { position: absolute; content: ''; right: calc( 100% + 12px ); top: 9px; width: 0; height: 2px; background-color: #000; transition: width 100ms ease;}

			&:hover {
				opacity: 1;
				& b { opacity: 1; }
				&:after { width: 24px; }
			}
		}
	}
}










@media screen and (min-width: 25rem) {}
@media screen and (min-width: 40rem) {
	.publication-grid {
		& > main {
			grid-template-columns: 240px auto 128px; gap: 24px;

			& > div:nth-child(2) { padding-left: 0px; }
			& > div:nth-child(5) {
				padding-left: 0px;
				/* grid-column: 2 / span 2; */
			}
			& > div:nth-child(8) {
				padding-left: 0px;
				grid-column: 2 / span 2;
			}

		}
	}

}
@media screen and (min-width: 50rem) {
	.publication-grid {
		& > main {
			grid-template-columns: 300px auto 128px; gap: 48px;

			& > div:nth-child(2) { padding-left: 0px; }
			& > div:nth-child(5) {
				padding-left: 0px;
				/* grid-column: 2 / span 2; */
			}
			& > div:nth-child(8) {
				padding-left: 0px;
				grid-column: 2 / span 2;
			}

		}
	}
}
@media screen and (min-width: 60rem) {}
@media screen and (min-width: 70rem) {
	/* .publication-grid { grid-template-columns: 5fr 1fr; } */
}