.hero {
	padding-inline:var(--global_inline_padding);
	padding-block-end:0;
	text-align: center;

	& p {
		max-width:65ch;
		margin-inline:auto;
	}
}

.packages {
	padding:var(--global_padding);



	& .package {
		position: relative;
		padding-bottom:1rem;
		margin-bottom:1rem;

		display:grid;
		grid-template-columns: 1fr 400px;
		gap:3rem;

		&::after {
			position:absolute;
			content:'';
			background-image:url('../img/wavy-black.svg');
			opacity:0.25;
			height:0.25rem;
			width:100%;
			bottom:0;
			left:0;
		}

		&:last-of-type::after {
			display:none;
		}

		& .btn {
			text-align: center;
			justify-self:end;
			align-self:start;
		}
	}
	

	& details {
		position:relative;
		display:grid;
		align-items:start;
		padding:0;
	
		& summary {
			display:grid;
			grid-template-columns: 1fr 230px max-content max-content;
			gap:3rem;
			align-items:center;
			cursor:pointer;
	
			& h2 {
				margin:0;
				font-size: clamp(1rem,2vw,2rem);
			}

			& .btn {
				font-size: clamp(1rem,1.5vw,1.1rem);
  				padding: 0.4rem 1.5rem 0.4rem 1.75rem;
				text-align: center;
				margin:0;

				&::after {
					content:'+'
				}
			}
	
			& img {
				height:1.5rem;
			}

			& p {
				margin:0;
			}

			& .duration,
			& .price {
				display:flex;
				flex-wrap: wrap;
				align-items: center;
				gap:0.25rem;

				& img {
					filter:brightness(0);
				}

				& p {
					font-family: "Freckle Face", system-ui;
					font-size: clamp(1rem,2vw,2rem);
				}
			}
		}
	
		&[open]{
			& summary {
				& .btn {
					border-color:#fff;
					color:#fff;
					&::after {
						content:'-';
					}
				}
			}
		}
	
		& .content {
			padding-top:0.5rem;
			display:block;

			& li {
				margin-bottom: 0.5rem;
			}
		}
	
		&:last-of-type {
			margin-bottom:0;
			border-bottom:none;
		}
	
		.b_theme & {
			
			&::after {
				background-image:url('../img/wavy-white.svg');
			}
	
			& summary {
				& h3 {
					color:#fff;
				}
			}
	
			& summary:hover,
			&[open] summary {
				& h3 {
					color:var(--yellow);
				}
			}
		}
	}
}