.grid-modal {
	--postion: 30px;
	--reset-size: 40px;
}

@media only screen and (max-width: 1068px) {
	.grid-modal {
		--postion: 20px;
		--reset-size: 30px;
	}
}

.grid-modal .modal-cta {
	position: absolute;
	bottom: var(--postion);
	right: var(--postion);
	height: var(--reset-size);
	width: var(--reset-size);
	z-index: 10;
	cursor: pointer;
	background-color: rgba(134, 134, 139, 0.92);
	border-radius: 100%;
	transform: rotate(0);
	transition: transform 0.66s cubic-bezier(0.66, 0, 0.2, 1), background-color 0.66s 0s cubic-bezier(0.66, 0, 0.01, 1);
	-webkit-tap-highlight-color: transparent;
}

html.reduced-motion .grid-modal .modal-cta {
	transition: none;
}

.grid-modal .modal-cta:hover {
	background-color: rgba(81, 81, 84, 0.92);
}

.grid-modal .modal-cta .plus-icon {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	fill: #fff;
}

.grid-modal .modal-cta .plus-icon #reset {
	opacity: 1;
	transition: opacity 0.66s 0s cubic-bezier(0.66, 0, 0.01, 1);
}

.grid-modal .modal-cta .plus-icon #reset-solid {
	opacity: 0;
	transition: opacity 0.66s 0s cubic-bezier(0.66, 0, 0.01, 1);
}

.grid-modal .modal-cta-text {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid-modal .modal-content {
	background-color: #1d1d1f !important;
	box-sizing: border-box;
	border-radius: inherit;
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.66s 0.66s cubic-bezier(0.66, 0, 0.2, 1), visibility 0.66s 0.66s;
	display: flex;
	flex-direction: column;
	padding: var(--tile-padding);
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 734px) {
	.grid-modal .modal-content {
		padding: 10px;
		padding-bottom: 40px;
	}
}

.grid-modal .modal-content .grid-item-copy {
	margin-top: 0;
	color: #fff;
	overflow-y: scroll;
	width: calc(60% - 1em);
	padding-right: 1em;
}

.grid-modal .modal-content .grid-item-copy.large-width {
	width: calc(90% - 1em);
}

@media only screen and (max-width: 1068px) {
	.grid-modal .modal-content .grid-item-copy {
		width: calc(80% - 1em);
	}
}

@media only screen and (max-width: 734px) {
	.grid-modal .modal-content .grid-item-copy {
		width: calc(100% - 1em);
	}
}

.grid-modal .modal-content .grid-item-copy.extra-padding {
	padding-bottom: 20px;
}

.grid-modal .modal-content .grid-item-copy a {
	color: #2997ff;
}

.half .grid-modal .modal-content .grid-item-copy {
	width: calc(100% - 1em);
}

@media only screen and (max-width: 1068px) {
	.half .grid-modal .modal-content .grid-item-copy {
		width: calc(100% - 1em);
	}
}

@media only screen and (max-width: 734px) {
	.half .grid-modal .modal-content .grid-item-copy {
		width: calc(100% - 1em);
	}
}

.grid-modal .modal-content .grid-item-copy .top-gradient {
	display: none;
	position: absolute;
	top: var(--tile-padding);
	height: 2em;
	width: 100%;
	background: linear-gradient(to bottom, #1d1d1f, rgba(29, 29, 31, 0) 100%);
	pointer-events: none;
}

@media only screen and (max-width: 734px) {
	.grid-modal .modal-content .grid-item-copy .top-gradient {
		top: var(--tile-padding-vertical);
	}
}

.grid-modal .modal-content .grid-item-copy .bottom-gradient {
	position: absolute;
	bottom: var(--tile-padding);
	height: 2em;
	width: 100%;
	background: linear-gradient(to top, #1d1d1f, rgba(29, 29, 31, 0) 100%);
	pointer-events: none;
}

@media only screen and (max-width: 734px) {
	.grid-modal .modal-content .grid-item-copy .bottom-gradient {
		bottom: 59px;
	}
}

.modal-toggle {
	position: fixed;
}

.modal-toggle:checked ~ .grid-modal .modal-content {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.66s cubic-bezier(0.66, 0, 0.2, 1), visibility 0.66s;
}

.modal-toggle:checked ~ .grid-modal .modal-content .fade-transform-in {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.66s 0.66s cubic-bezier(0.66, 0, 0.2, 1);
}

.modal-toggle:checked ~ .grid-modal .modal-cta {
	background-color: rgba(110, 110, 115, 0.8);
	transform: rotate(45deg);
	transition: transform 0.66s cubic-bezier(0.66, 0, 0.2, 1), background-color 0.66s 0s cubic-bezier(0.66, 0, 0.01, 1);
}

html.reduced-motion .modal-toggle:checked ~ .grid-modal .modal-cta {
	transition: none;
}

.modal-toggle:checked ~ .grid-modal .modal-cta .plus-icon {
	fill: #f5f5f7;
}

.modal-toggle:checked ~ .grid-modal .modal-cta:hover {
	background-color: rgba(210, 210, 215, 0.8);
}

.modal-toggle:checked ~ .grid-modal .modal-cta:hover .plus-icon {
	fill: #fff;
}

.theme-dark .modal-toggle:checked ~ .grid-modal .modal-cta {
	background-color: rgba(110, 110, 115, 0.92);
}

.theme-dark .modal-toggle:checked ~ .grid-modal .modal-cta .plus-icon {
	fill: #f5f5f7;
}

.theme-dark .modal-toggle:checked ~ .grid-modal .modal-cta:hover {
	background-color: rgba(81, 81, 84, 0.92);
}

.theme-dark .modal-toggle:checked ~ .grid-modal .modal-cta:hover .plus-icon {
	fill: #fff;
}

.theme-dark .grid-modal .modal-cta {
	background-color: rgba(134, 134, 139, 0.92);
}

.theme-dark .grid-modal .modal-cta .plus-icon {
	fill: #fff;
}

.theme-dark .grid-modal .modal-cta:hover {
	background-color: rgba(210, 210, 215, 0.8);
}

.theme-dark .grid-modal .modal-content {
	background-color: #f5f5f7;
}

.theme-dark .grid-modal .modal-content .grid-item-copy {
	color: #1d1d1f;
}

.theme-dark .grid-modal .modal-content .grid-item-copy a {
	color: #06c;
}

.theme-dark .grid-modal .modal-content .grid-item-copy .top-gradient {
	background: linear-gradient(to bottom, #f5f5f7, rgba(245, 245, 247, 0) 90%);
}

.theme-dark .grid-modal .modal-content .grid-item-copy .bottom-gradient {
	background: linear-gradient(to top, #f5f5f7, rgba(245, 245, 247, 0) 90%);
}