section.panel {
	padding: 40px 5% 0px 5%;
	@media (width < 550px) {
		padding: 40px 0% 0px 0%;
	}
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		> picture {
			padding-inline: 4%;
			grid-area: 1/1/2/2;
			@media (width < 550px) {
				padding-inline: 0%;
			}
			> img {
				width: 100%;
				max-width: 100%;
			}
		}
		> div {
			grid-area: 1/1/2/2;
			justify-self: start;
            align-self: center;
			@media (width < 550px) {
				padding-left: 2%;
			}
			> picture {
				> img {
					width: min(28vw,533px);
					@media (width < 550px) {
						width: 60vw;
					}
				}
			}
			> p {
				display: inline-block;
				padding-block: 2px 4px;
				padding-inline: 40px;
				margin-top: 10px;
				margin-right: 4%;
				text-align: center;
				background: linear-gradient(to right,#4065ff,#48edfc);
				font-size: min(1.1rem, 6vw);
				line-height: 1.5;
				color: #fff;
			}
		}
	}
}
section.breadcrumbs {
	padding-inline: 8.5vw;
	@media (width < 550px) {
		padding-inline: 5vw;
	}
}
section.info {
	padding: 100px 5% 100px 5%;
	background-image: url(./image/products02.svg),url(./image/bg.webp);
	background-repeat: no-repeat, no-repeat;
	background-position: 100% 100%, 110% 100%;
	background-size: 800px auto, auto 100%;
	@media (width < 1300px) {
		background-image: url(./image/products02.svg),url(./image/bg.webp);
		background-repeat: no-repeat, no-repeat;
		background-position: 100% 100%, 145% 100%;
		background-size: 55% auto,	80% auto;
	}
	@media (width < 600px) {
		background-image: url(./image/products02.svg),url(./image/bg.webp);
		background-repeat: no-repeat, no-repeat;
		background-position: 100% 100%, 160% 100%;
		background-size: 82% auto,	100% auto;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h3 {
			text-align: center;
			font-size: 2rem;
			line-height: 1.3;
			color: #000;
			font-weight: 700;
			letter-spacing: 5px;
		}
		> div {
			margin-top: 60px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 40px;
			row-gap: 40px;
			@media (width < 600px) {
				grid-template-columns: 1fr;
				row-gap: 50px;
			}
			> article {
				filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.25));
				&:last-of-type {
					filter: unset;
				}
				> a {
					text-decoration: none;
					&:hover {
						> div {
							> figure:nth-of-type(1) {
								transform: scale(1.1);
							}
							> figure:nth-of-type(2) {
								transform: scale(1);
							}
						}
						> p {
							background-color: var(--color-accent2);
							color: #fff;
							background-image: url(./image/linkmark_hover.svg);
							background-repeat: no-repeat;
							background-position: calc(100% - 20px) 50%;
						}
					}
					> div {
						display: grid;
						overflow: hidden;
						> figure {
							transition: transform 0.4s ease;
							grid-area: 1/1/2/2;
							> img {
								max-width: 100%;
							}
							&:nth-of-type(2) {
								padding-inline: 5%;
								width: 100%;
								align-self: end;
							}
						}
					}
					> p {
						background-image: url(./image/linkmark.svg);
						background-repeat: no-repeat;
						background-position: calc(100% - 20px) 50%;
						padding: 20px;
						background-color: #bfd9ed;
						font-size: min(1.3rem, 6vw);
						line-height: 1.0;
						color: var(--color-accent2);
						font-weight: 700;
					}
				}
				> figure {
					margin-right: -5%;
					justify-self: end;
					> img {
						max-width: 100%;
					}
					@media (width < 600px) {
						justify-self: center;
						margin-right: 0%;
					}
				}
			}
		}
	}
}