/* Base */
body {
	overflow-x: hidden;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
		sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
input {
	all: unset;
}

.swiper {
	width: 100%;
}

.hidden {
	display: none !important;
}
/* Base */

html {
	-webkit-tap-highlight-color: transparent;
}

.body {
	overflow: hidden;
	display: grid;
	font-size: 0.9375rem;
	-webkit-text-size-adjust: 100%;
}
.body--status--freeze {
	overflow: hidden;
}

a {
	text-decoration: none;
}
a[href^='tel'] {
	color: initial;
}

h3 {
	line-height: 1.4;
	font-size: 1.25rem;
	font-weight: 500;
}

main {
	display: grid;
}
@media (max-width: 767px) {
	main {
		row-gap: 80px;
	}
}
@media (min-width: 768px) {
	main {
		row-gap: 120px;
	}
}

.item {
	display: grid;
	width: 100%;
	max-width: 1368px;
	margin: auto;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.item {
		row-gap: 32px;
	}
}
@media (min-width: 768px) {
	.item {
		row-gap: 52px;
	}
}
@media (max-width: 767px) {
	.item {
		padding-right: 12px;
		padding-left: 12px;
	}
}
@media (min-width: 768px) and (max-width: 959px) {
	.item {
		padding-right: 32px;
		padding-left: 32px;
	}
}
@media (min-width: 960px) {
	.item {
		padding-right: 64px;
		padding-left: 64px;
	}
}

.label {
	margin: 0;
	text-align: center;
	font-weight: 600;
}
@media (max-width: 767px) {
	.label {
		font-size: 1.625rem;
	}
}
@media (min-width: 768px) {
	.label {
		font-size: 2.125rem;
	}
}

.desc {
	line-height: 1.4;
}
.desc ul {
	margin: 0;
	padding-left: 20px;
}

.descGrey {
	position: relative;
	display: grid;
	align-items: start;
	padding-top: 32px;
	padding-bottom: 32px;
	border-radius: 20px;
	background-color: #f7f7f7;
}
@media (max-width: 767px) {
	.descGrey {
		padding-left: 16px;
		padding-right: 16px;
	}
}
@media (min-width: 768px) {
	.descGrey {
		padding-left: 24px;
		padding-right: 24px;
	}
}

button {
	all: unset;
}

.button {
	padding: 12px 30px;
	text-align: center;
	font-size: 1rem;
	border-radius: 24px;
	background-color: #000;
	color: #fff;
	cursor: pointer;
}
.button:hover {
	background-color: #313131;
}

.input {
	height: 48px;
	padding: 0 12px;
	font-size: 0.9375rem;
	background-color: #f7f7f7;
}

details {
	overflow: hidden;
	display: grid;
	border-radius: 12px;
	background-color: #f7f7f7;
	user-select: none;
}

summary {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: 16px 24px;
	font-weight: 500;
	cursor: pointer;
}
summary::-webkit-details-marker {
	display: none;
}

.summaryIcon {
	width: 32px;
	height: 32px;
	margin: 0 0 0 24px;
}

footer {
	background-color: #ffc853;
}

.icon:hover {
	fill: #e02463;
}

.header {
	position: relative;
	gap: 40px;
}
@media (max-width: 767px) {
	.header {
		margin-bottom: 48px;
	}
}
@media (min-width: 768px) {
	.header {
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 128px;
	}
}
.header::before,
.header::after {
	content: '';
	position: absolute;
}
.header::before {
	top: -25%;
	right: calc(100% - 64px);
	width: 494px;
	height: 384px;
	background-image: url('./imgs/header/left.svg');
}
.header::after {
	left: calc(100% - 120px);
	width: 577px;
	height: 762px;
	background-image: url('./imgs/header/right.svg');
}
@media (max-width: 767px) {
	.header::after {
		bottom: -150px;
	}
}
@media (min-width: 768px) {
	.header::after {
		bottom: -15%;
	}
}

.headerLogo {
	width: 100%;
	background-image: url('./imgs/header/logo.svg');
	background-repeat: no-repeat;
}
@media (max-width: 767px) {
	.headerLogo {
		height: 48px;
		margin: 32px 0;
	}
}
@media (min-width: 768px) {
	.headerLogo {
		height: 68px;
		margin: 44px 0 0;
	}
}

.headerLabel {
	margin: 0 0 -16px;
	text-align: initial;
}

.headerLabelIcon {
	position: relative;
	display: inline-block;
	font-style: normal;
	color: #e02463;
}
.headerLabelIcon::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding-top: calc(7 / 119 * 100%);
	background-image: url('./imgs/header/line.svg');
	background-position: center center;
	background-repeat: no-repeat;
}

.headerDesc {
	z-index: 1;
	display: grid;
	gap: 32px;
	margin: auto 0;
}
@media (min-width: 768px) {
	.headerDesc {
		place-items: start;
		padding: 20px 0;
	}
}

.headerIcon {
	z-index: 1;
	background-image: url('./imgs/header/header.svg');
	background-position: center center;
	background-repeat: no-repeat;
}
@media (max-width: 959px) {
	.headerIcon {
		height: 320px;
	}
}
@media (min-width: 960px) {
	.headerIcon {
		height: 370px;
	}
}

.hint {
	outline: none;
}

@media (min-width: 768px) {
	.hintItem {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.hintItem {
		gap: 20px;
	}
}

@media (min-width: 768px) and (max-width: 959px) {
	.hintItem {
		gap: 32px;
	}
}

@media (min-width: 960px) {
	.hintItem {
		gap: 64px;
	}
}

@media (max-width: 767px) {
	.feature {
		row-gap: 50px;
	}
}

@media (min-width: 768px) {
	.feature {
		row-gap: 100px;
	}
}

.featureGrid {
	display: grid;
	gap: 32px;
}
@media (min-width: 768px) {
	.featureGrid {
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
	}
}

.featureItem {
	display: grid;
	gap: 32px;
}

@media (max-width: 767px) {
	.featureLabel {
		font-size: 1.5rem;
		font-weight: 500;
	}
}

@media (min-width: 768px) {
	.featureLabel {
		font-size: 1.625rem;
		font-weight: 600;
	}
}

.featureType {
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
@media (max-width: 767px) {
	.featureType {
		min-height: 250px;
	}
}
@media (min-width: 768px) {
	.featureType {
		min-height: 300px;
	}
}
@media (min-width: 768px) {
	.featureGrid:nth-child(2n + 1) .featureType {
		order: -1;
	}
}
.featureType--profile {
	background-image: url('./imgs/feature/type/profile.svg');
}
.featureType--time {
	background-image: url('./imgs/feature/type/time.svg');
}
.featureType--rate {
	background-image: url('./imgs/feature/type/rate.svg');
}

.featureIconGroup {
	display: grid;
	gap: 16px;
}

.featureIconItem {
	display: grid;
	grid-auto-flow: column;
	place-content: start;
	align-items: center;
	gap: 16px;
	line-height: 1.4;
	font-size: em(15);
}

.featureIcon {
	width: 38px;
	height: 39px;
}
.featureIcon--service {
	background-image: url('./imgs/feature/service.svg');
}
.featureIcon--text {
	background-image: url('./imgs/feature/text.svg');
}
.featureIcon--media {
	background-image: url('./imgs/feature/media.svg');
}
.featureIcon--cal {
	height: 38px;
	background-image: url('./imgs/feature/cal.svg');
}
.featureIcon--review {
	height: 38px;
	background-image: url('./imgs/feature/review.svg');
}
.featureIcon--sync {
	height: 38px;
	background-image: url('./imgs/feature/sync.svg');
}
.featureIcon--position {
	width: 39px;
	background-image: url('./imgs/feature/position.svg');
}
.featureIcon--conversion {
	background-image: url('./imgs/feature/conversion.svg');
}
.featureIcon--rate {
	height: 41px;
	background-image: url('./imgs/feature/rate.svg');
}

.experience {
	outline: none;
}

.experienceGrid {
	place-items: center;
	row-gap: 24px;
}
@media (min-width: 768px) {
	.experienceGrid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 64px;
	}
}

.experienceItem {
	display: grid;
	gap: 24px;
}
@media (min-width: 768px) {
	.experienceItem {
		place-items: start;
	}
}

.experienceIcon {
	display: block;
	width: 100%;
	background-image: url('./imgs/experience.svg');
	background-position: center center;
	background-repeat: no-repeat;
}
@media (max-width: 959px) {
	.experienceIcon {
		height: 320px;
	}
}
@media (min-width: 960px) {
	.experienceIcon {
		height: 366px;
	}
}

.price {
	outline: none;
}

.priceGrid {
	display: grid;
}
@media (max-width: 767px) {
	.priceGrid {
		grid-template-columns: auto;
		gap: 16px;
	}
}
@media (min-width: 768px) {
	.priceGrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px 32px;
	}
}

.cardPrice {
	display: grid;
	place-content: start;
	gap: 32px;
	max-width: 420px;
	margin: 0 auto;
	padding: 32px;
	border-radius: 20px;
	background-color: #ffc853;
}
@media (max-width: 959px) {
	.cardPrice {
		padding: 32px 16px;
	}
}

.cardPriceContent {
	display: grid;
	place-items: center;
	gap: 12px;
}
.cardPriceContent::before {
	content: '';
	width: 100%;
	max-width: 140px;
	height: 3px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.8);
}
.cardPriceContent i {
	font-size: 0.8125rem;
	color: rgba(0, 0, 0, 0.6);
}

.cardPriceLabel {
	margin: 0 0 28px;
	text-align: center;
	font-size: 1.75rem;
	font-weight: 600;
}

.cardPriceDetail {
	display: grid;
	place-items: center;
	gap: 8px;
}

.cardPriceValue {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 1.375rem;
	font-weight: 500;
}

.cardPriceSale {
	font-size: 1rem;
	text-decoration: line-through;
	color: rgba(0, 0, 0, 0.6);
}

.cardPriceHint {
	text-align: center;
	font-size: 0.875rem;
}

.cardPriceDesc {
	line-height: 1.4;
	font-size: 0.9375rem;
}

.help {
	outline: none;
}

.helpGrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 40px;
}

.helpInput {
	display: none;
}

.helpTab {
	color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
.helpTab:hover {
	color: #e02463;
}

.helpGroup {
	width: 100%;
}

.helpList {
	display: none;
	gap: 12px;
}
.helpList .desc {
	padding: 0 24px 24px;
}
@media (max-width: 767px) {
	.helpList .desc,
	.helpList summary {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.helpIcon {
	fill: rgba(13, 13, 13, 0.6);
}
details[open] .helpIcon {
	transform: rotate(45deg);
}

.helpInput:nth-of-type(1):checked ~ .helpTab:nth-of-type(1),
.helpInput:nth-of-type(2):checked ~ .helpTab:nth-of-type(2),
.helpInput:nth-of-type(3):checked ~ .helpTab:nth-of-type(3),
.helpInput:nth-of-type(4):checked ~ .helpTab:nth-of-type(4) {
	color: #e02463;
	cursor: default;
}

.helpInput:nth-of-type(1):checked ~ .helpGroup .helpList:nth-child(1),
.helpInput:nth-of-type(2):checked ~ .helpGroup .helpList:nth-child(2),
.helpInput:nth-of-type(3):checked ~ .helpGroup .helpList:nth-child(3),
.helpInput:nth-of-type(4):checked ~ .helpGroup .helpList:nth-child(4) {
	display: grid;
}

.people {
	background-color: #f7f7f7;
}
@media (max-width: 767px) {
	.people {
		padding: 40px 0;
	}
}
@media (min-width: 768px) {
	.people {
		padding: 60px 0;
	}
}

.peopleGrid {
	display: grid;
}
@media (max-width: 767px) {
	.peopleGrid {
		overflow: scroll;
		grid-auto-columns: 200px;
		grid-auto-flow: column;
	}
}
@media (min-width: 768px) {
	.peopleGrid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (max-width: 959px) {
	.peopleGrid {
		gap: 12px;
	}
}
@media (min-width: 960px) {
	.peopleGrid {
		gap: 20px;
	}
}

.cardPeople {
	overflow: hidden;
	display: grid;
	margin: 0 0 auto;
	border-radius: 10px;
	box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.03);
	background-color: #fff;
}

.cardPeopleMediaWrap {
	position: relative;
	padding: 0 0 100% 0;
	background: #d2d2d2;
}

.cardPeopleMedia {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.cardPeopleContent {
	display: grid;
	place-items: center;
	gap: 4px;
	padding: 12px 8px;
}

.cardPeopleLabel {
	text-align: center;
	font-weight: 600;
	color: initial;
}

.cardPeopleDesc {
	text-align: center;
	font-size: 0.8125rem;
	color: rgba(0, 0, 0, 0.6);
}

.avt {
	display: grid;
	margin: 0 auto;
}
.avt--size--120 {
	gap: 12px;
}

.avtImg {
	display: block;
	border-radius: 50%;
	margin: 0 auto;
	background-color: #d9d9d9;
	object-fit: cover;
}

.avtDesc {
	display: grid;
	gap: 2px;
	margin: auto 0;
}

.avtRole {
	color: rgba(0, 0, 0, 0.6);
}

.avt--size--120 .avtImg {
	width: 120px;
	height: 120px;
}

.avt--size--120 .avtDesc {
	text-align: center;
}

.avt--size--120 .avtName {
	font-size: 1.25rem;
}

.slider {
	outline: none;
}

.sliderGroup {
	overflow: hidden;
	position: relative;
	display: grid;
	padding: 0 0 48px;
}
@media (max-width: 767px) {
	.sliderGroup {
		margin-bottom: 40px;
	}
}
@media (min-width: 768px) {
	.sliderGroup {
		margin-bottom: 60px;
	}
}

.sliderGrid {
	display: grid;
	align-content: start;
	gap: 32px;
}

.sliderIcon {
	z-index: 1;
	position: absolute;
	top: 36px;
	width: 48px;
	height: 48px;
	user-select: none;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px black;
	cursor: pointer;
}
.sliderIcon:hover {
	box-shadow: inset 0 0 0 2px #e02463;
}
.sliderIcon--direction--left {
	left: 0;
}
.sliderIcon--direction--right {
	right: 0;
}
.sliderIcon[aria-disabled='true'] {
	opacity: 0.1;
	pointer-events: none;
}

.sliderComment {
	line-height: 1.4;
	text-align: center;
}

.sliderVideo {
	position: relative;
	width: 50%;
	max-height: 100%;
	margin: auto;
	aspect-ratio: 16/9;
}
.sliderVideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sliderDots {
	background-color: transparent;
}
.sliderDots .swiper-pagination-bullet-active {
	background-color: #e02463;
}

.chart {
	width: 100%;
	max-width: 564px;
	margin: 0 auto;
}

.chartIcon {
	position: absolute;
	right: 16px;
	border-radius: 50%;
	background-color: #fff;
}
details[open] .chartIcon {
	transform: rotate(180deg);
}

.chartPreview {
	display: grid;
	place-items: start;
}
@media (max-width: 767px) {
	.chartPreview {
		justify-self: center;
		gap: 16px;
	}
}
@media (min-width: 768px) {
	.chartPreview {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
}

.chartPreviewNode {
	display: grid;
	gap: 6px;
}

.chartPreviewLabel {
	line-height: 100%;
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
}
.chartPreviewNode:nth-child(1) .chartPreviewLabel {
	background-color: #4642ff;
}
.chartPreviewNode:nth-child(2) .chartPreviewLabel {
	background-color: #22b491;
}
.chartPreviewNode:nth-child(3) .chartPreviewLabel {
	background-color: #fa7800;
}

.chartPreviewCount {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: 0.6875rem;
	color: rgba(0, 0, 0, 0.6);
}
.chartPreviewCount::before {
	content: '';
	align-self: center;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 7px solid #2b9e0f;
}
.chartPreviewCount--status--negative::before {
	border-top: 7px solid #d0000c;
	border-bottom: none;
}
.chartPreviewCount b {
	font-size: 0.8125rem;
	font-weight: 700;
	color: initial;
}

.chartImg {
	display: grid;
	padding: 16px 16px 32px;
}
@media (max-width: 767px) {
	.chartImg {
		gap: 16px;
	}
}
@media (min-width: 768px) {
	.chartImg {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
}

.chartImgNode {
	padding-bottom: 50%;
	background-position: center center;
	background-repeat: no-repeat;
}
@media (max-width: 767px) {
	.chartImgNode:nth-child(1) {
		background-position-x: calc(50% - 2px);
	}
}
@media (min-width: 768px) {
	.chartImgNode {
		padding-bottom: 100%;
	}
}
.chartImg--state--01 .chartImgNode:nth-child(1) {
	background-image: url('./imgs/slider/chart/01-01.svg');
}
@media (max-width: 767px) {
	.chartImg--state--01 .chartImgNode:nth-child(1) {
		background-position-x: calc(50% - 1px);
	}
}
.chartImg--state--01 .chartImgNode:nth-child(2) {
	background-image: url('./imgs/slider/chart/01-02.svg');
}
.chartImg--state--01 .chartImgNode:nth-child(3) {
	background-image: url('./imgs/slider/chart/01-03.svg');
}
.chartImg--state--02 .chartImgNode:nth-child(1) {
	background-image: url('./imgs/slider/chart/02-01.svg');
}
.chartImg--state--02 .chartImgNode:nth-child(2) {
	background-image: url('./imgs/slider/chart/02-02.svg');
}
.chartImg--state--02 .chartImgNode:nth-child(3) {
	background-image: url('./imgs/slider/chart/02-03.svg');
}
.chartImg--state--03 .chartImgNode:nth-child(1) {
	background-image: url('./imgs/slider/chart/03-01.svg');
}
.chartImg--state--03 .chartImgNode:nth-child(2) {
	background-image: url('./imgs/slider/chart/03-02.svg');
}
.chartImg--state--03 .chartImgNode:nth-child(3) {
	background-image: url('./imgs/slider/chart/03-03.svg');
}
.chartImg--state--04 .chartImgNode:nth-child(1) {
	background-image: url('./imgs/slider/chart/04-01.svg');
}
.chartImg--state--04 .chartImgNode:nth-child(2) {
	background-image: url('./imgs/slider/chart/04-02.svg');
}
.chartImg--state--04 .chartImgNode:nth-child(3) {
	background-image: url('./imgs/slider/chart/04-03.svg');
}
.chartImg--state--05 .chartImgNode:nth-child(1) {
	background-image: url('./imgs/slider/chart/05-01.svg');
}
@media (max-width: 767px) {
	.chartImg--state--05 .chartImgNode:nth-child(1) {
		background-position-x: calc(50% - 5px);
	}
}
.chartImg--state--05 .chartImgNode:nth-child(2) {
	background-image: url('./imgs/slider/chart/05-02.svg');
}
@media (max-width: 767px) {
	.chartImg--state--05 .chartImgNode:nth-child(2) {
		background-position-x: calc(50% - 2px);
	}
}
.chartImg--state--05 .chartImgNode:nth-child(3) {
	background-image: url('./imgs/slider/chart/05-03.svg');
}

.footer {
	align-items: start;
	padding-bottom: 160px;
	background-position: center bottom;
	background-image: url('./imgs/footer.svg');
	background-size: clamp(300px, 40%, 550px);
	background-repeat: no-repeat;
}
@media (min-width: 768px) {
	.footer {
		grid-template-columns: repeat(2, 1fr);
		gap: 64px;
		padding-top: 60px;
		padding-bottom: 60px;
		background-position: 32px bottom;
	}
}

.feedback {
	display: grid;
	gap: 32px;
	padding-top: 32px;
	padding-bottom: 32px;
	border-radius: 10px;
	background-color: #ffc853;
}
@media (max-width: 767px) {
	.feedback {
		padding-right: 16px;
		padding-left: 16px;
	}
}

.feedbackGrid {
	display: grid;
	gap: 32px 16px;
}
@media (max-width: 767px) {
	.feedbackGrid {
		grid-template-columns: repeat(auto-fill, 160px);
	}
}
@media (min-width: 768px) {
	.feedbackGrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.feedbackItem {
	all: unset;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 12px;
	cursor: pointer;
}
.feedbackItem:hover {
	color: #544015;
}

.feedbackLabel {
	font-size: 1.25rem;
	font-weight: 500;
}

.feedbackLink {
	display: inline-flex;
}

.feedbackIcon {
	grid-row: span 2;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.feedbackIcon:hover {
	fill: #544015;
}
.feedbackItem:hover .feedbackIcon {
	fill: #544015;
}

.feedbackIconLabel {
	font-size: 1.25rem;
	font-weight: 500;
	color: initial;
}

.feedbackIconValue {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
}

.feedbackPhone {
	font-size: 1.75rem;
	font-weight: 600;
}

.formGroup {
	display: grid;
	gap: 24px;
}

.form {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 32px;
	border-radius: 12px;
	border: 1px dashed rgba(0, 0, 0, 0.24);
	background-color: #fff;
}
@media (max-width: 767px) {
	.form {
		padding: 32px 16px;
	}
}

.formIcon {
	width: 104px;
	height: 80px;
	margin: 0 auto;
	background-image: url('./imgs/form.svg');
}

.formGrid {
	display: grid;
	gap: 12px;
}

.formLabel {
	font-size: 1.25rem;
	font-weight: 500;
}

.formHint {
	text-align: center;
	font-size: 0.6875rem;
	color: rgba(0, 0, 0, 0.6);
}

.formLink {
	color: #8a8a8a;
	cursor: pointer;
}
.formLink:hover {
	color: #e02463;
}

.formDesc {
	text-align: center;
}

.doc {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 0 32px;
}
@media (max-width: 767px) {
	.doc {
		padding: 0 16px;
	}
}

.docLink {
	color: #e02463;
	cursor: pointer;
}
.docLink:hover {
	color: #e02463;
}

.mdl {
	overflow: auto;
	z-index: 10;
	position: fixed;
	display: none;
	place-items: center;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.25);
}
.mdl--status--open {
	display: grid;
}
.mdl--status--close {
	outline: none;
}

.mdlIcon {
	position: absolute;
	top: 0;
	right: -32px;
	width: 32px;
	height: 32px;
	background-image: url('./imgs/modal.svg');
	cursor: pointer;
}

.mdlGrid {
	position: relative;
	display: grid;
	gap: 16px;
	max-width: 480px;
	margin: 32px;
	padding: 16px;
	border-radius: 20px;
	background-color: #fff;
}

.mdl .feedback {
	place-items: center;
	gap: 16px;
	padding: 16px 32px;
}

.mdl .feedbackGrid {
	grid-auto-flow: column;
	gap: 16px;
}

.mdl .form {
	padding: 16px;
}

.mdl .formLabel {
	text-align: center;
}