main.soulody > section#circle {
	grid-area: circle;
	position: relative;
	padding: 0 0 32px 16px;
	background: url(../../assets/circle-placeholder.webp) center / cover no-repeat;
	border-radius: 16px;
	justify-items: start;
	align-items: end;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;

	@media screen and (max-width: 930px) {
		padding: 0 8px 24px;
	}

	> video {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 16px;
	}

	> main {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: flex-end;

		> section.circle-card {
			position: absolute;
			left: 0;
			width: 352px;
			height: 514px;
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: auto max-content 56px;
			grid-template-areas:
      "title"
      "text"
      "footer";
			row-gap: 24px;
			column-gap: 24px;
			align-items: center;
			max-width: 352px;
			padding: 24px;
			border-radius: 16px;
			background-color: #F1F1F0;
			align-self: end;

			@media screen and (max-width: 930px) {
				row-gap: 16px;
				column-gap: 16px;
			}

			> header {
				grid-area: title;
				display: grid;
				grid-template-columns: 40px auto 84px;
				grid-template-rows: 100%;
				grid-template-areas: "circle title arrows";

				> img {
					grid-area: circle;
				}

				> h4 {
					grid-area: title;
				}

				> nav.arrows {
					grid-area: arrows;
					display: flex;
					flex-grow: 0;
					flex-shrink: 1;

					> .left, > .right {
						width: 40px;
						height: 40px;
						padding: 8px;
						background-color: white;
						border-radius: 8px;
						cursor: pointer;
					}

					> .left {
						transform: rotate(180deg);
					}

					> .right {
						margin-left: 4px;
					}
				}
			}

			> main {
				grid-area: text;

				&.text-desktop {
					display: block;

					@media screen and (max-width: 930px) {
						display: none;
					}
				}

				&.text-mobile {
					display: none;

					@media screen and (max-width: 930px) {
						display: block;
					}
				}
			}

			> footer {
				grid-area: footer;
			}
		}
	}
}