.aio {
	& {max-width: 100%;font-size: 16px;line-height: 1.4;}
	&.aio__black {--grid-bg: #17191b;--grid-color: var(--white);--feat-bg: var(--black);--feat-color: var(--white);}
	&.aio__white {--grid-bg: var(--white);--grid-color: var(--black);--feat-bg: #f7f8fa;--feat-color: var(--black);}
	& .aio__title {font-size: 40px;font-weight: 500;margin: 0 0 32px;color: inherit;}
	& .aio__block {padding: 64px 0;}
	& .shiny {-webkit-text-fill-color: #0000;background: linear-gradient(to right, #828489, #F0F1F2, #B3B6BA);-webkit-background-clip: text;}
	& .aio__header {
		& {position: relative;color: var(--white);padding: 0;aspect-ratio: 21 / 9;background: var(--gray);}
		& img {max-width: 100%;height: auto;}
		& .logo {position: absolute;top:30px;right:30px}
		& .container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;}
		& .aio__header-aio__text {display: flex;flex-direction: column;max-width: min(590px,40%);}
		& h1.aio__title {border: none;color: inherit;font-size: 48px;font-weight: 500;}
		& h2 {margin: 0;color: inherit;line-height: inherit;font-size: 24px;}
	}
	& .aio__products {
		& {color: var(--black);background: #f7f8fa;}
		& .listing__products {margin-top: 48px}
		& .listing__product {padding: 10px}
	}
	& .aio__video {
		& {position: relative;color: var(--white);aspect-ratio: 18 / 9;display: flex;align-items: center;justify-content: center;}
		&:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);z-index: 2;}
		& video {height: 100%;object-fit: cover;width: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
		& .aio__title {margin: 0;position: relative;z-index: 3;max-width: 50%;text-align: center;}
	}
	& .aio__banner {
		& {position: relative;color: var(--white);aspect-ratio: 21 / 9;display: flex;align-items: center;justify-content: flex-start;}
		& img {height: 100%;object-fit: cover;width: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
		& .aio__text {
			& {position: relative;max-width: 50%;}
			& p:last-of-type {margin: 0}
		}
	}
	& .aio__grid {
		& {background: var(--grid-bg);color: var(--grid-color);padding: 80px 0;}
		&.aio__grid-bg {background: #f7f8fa;}
		& .aio__grid-item {display: flex;align-items: flex-start;gap: 15px;}
		& .aio__grid-stretch {align-items: stretch}
		& .aio__grid-main {
			& {width: 66.66%;display: flex;flex-wrap: wrap;--gap: 15px;gap: calc(3 * var(--gap)) var(--gap);}
			& .aio__grid-card {
				& {width: calc(50% - var(--gap) / 2);gap: calc(2 * var(--gap));}
				& .aio__text {
					& {padding: 0}
					& h2 {margin-bottom: var(--gap);font-size: 24px;font-weight: 900;}
				}
			}
		}
		& .aio__grid-aside {width: 33.33%;}
		& .aio__grid-col {
			& {width: 50%;background: var(--white);font-size: 1.5em;display: flex;flex-direction: column;}
	        & .aio__text {padding: 32px;flex-grow: 1;}
		}
		& .aio__grid-sticky {
			& {position: sticky;top: 50px;}
			& .aio__title {margin: 0}
		}
		& .aio__grid-banner {
			& {position: relative;aspect-ratio: 21 / 9;}
			@media screen and (min-width: 768px) {
				&.d-white {color: var(--white)}
			}
			& .aio__text {position: absolute;top: 30px;left: 30px;font-size: 1.5em;line-height: 1;max-width: 55%;}
		}
		& .aio__thumb {
			& {}
			& img {width: 100%;height: 100%;object-fit: cover;}
			& video {width: 100%;object-fit: cover;aspect-ratio: 1.2 / 1;}
			& .aio__ico {position: absolute;left: 37px;bottom: 37px;max-width: 55px;max-height: 55px}
		}
		& .aio__text {
			& {font-size: 1em;}
			&
			h2 {margin: 0 0 5px;font-weight: 400;color: inherit;font-size: inherit;}
			& p {
				& {}
				&:last-of-type {margin: 0;}
			}
		}
		& .aio__grid-card {
			& {display: flex;flex-direction: column;}
			& .aio__thumb {
				& {position: relative;aspect-ratio: 21 / 9;}
				& img {width: 100%;height: 100%;object-fit: cover;}
			}
			& .aio__text {
				& {padding: 40px;}
				& h2 {font-size: 1.25em;margin-bottom: 10px}
			}
		}
	}
	& .aio__last {
		& {background: var(--feat-bg);color: var(--feat-color);}
		&:not(.aio__last-pb) {padding-bottom: 0;}
		& img {max-width: 100%;}
		& .aio__title {}
		& .items {display: flex;justify-content: space-between;gap: 40px;margin-top: 40px;}
		& .item {
			& {display: flex;flex-direction: column;align-items: flex-start;width: 33.33%;max-width: 400px;}
			& img {max-width: 100px;}
			& h2 {margin: 32px 0 16px;font-size: 24px;}
			& p {margin: 0}
		}
	}
	& .aio__win {
		& {color: var(--black);background: #f7f8fa;--gap: 16px;overflow: hidden;}
		& .aio__slider {
		    & {display: flex;margin: 32px calc(-1 * var(--gap));position: relative;}
			& .owl-item {padding: 0 var(--gap)}
			& .owl-wrapper-outer {overflow: visible}
			& .owl-pagination {display: none}
			& .owl-buttons {
				& {}
				& > div {
					& {position: absolute;z-index: 5;top: 50%;transform: translateY(-50%);transform-origin: center;border: none;padding: 0;margin: 0;width: 64px;height: 64px;border-radius: 50%;background-color: #000000bf;transition: all .2s ease;opacity: 1;cursor: pointer;background-position: center;background-repeat: no-repeat;}
					&:hover {opacity: .5}
					&.owl-prev {background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.23 3.53996L11.46 4.79996L6.53998 9.71996L5.00998 11.1L22.23 11.1V12.9L5.00998 12.9L6.53998 14.31L11.46 19.2L10.23 20.46L1.76998 12L10.23 3.53996Z" fill="white"/></svg>');left: -32px;}
					&.owl-next {background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.77 20.46L12.54 19.2L17.46 14.28L18.99 12.9H1.77002V11.1H18.99L17.46 9.69004L12.54 4.80004L13.77 3.54004L22.23 12L13.77 20.46Z" fill="white"/></svg>');right: -32px;}
				}
			}
		}
		& .item {background: var(--white);height: 100%;display: flex;flex-direction: column;justify-content: space-between;text-align: center;padding: calc(2 * var(--gap)) calc(1.5 * var(--gap)) 0;}
		& .aio__thumb {
			& {}
			& img {max-width: 100%;}
		}
		& .desc {font-size: .82em;color: #999;margin: 10px 0 0}
	}
}
@media screen and (max-width: 1199px) {
	.aio {
		& {}
		& .aio__title {margin-bottom: 24px;font-size: 32px;}
		& .aio__header {
			& {}
			& h1.aio__title {font-size: 40px}
		}
		& .aio__grid {
			& {}
			& .aio__grid-card {
				& {}
				& .aio__text {padding: 24px;}
			}
		}
		& .aio__last {
			& {}
			& .items {gap: 32px;margin-top: 32px;}
		}
	}
}
@media screen and (max-width: 991px) {
	.aio {
		& {}
		& .aio__title {margin-bottom: 16px;}
		& .aio__block {padding: 48px 0;}
		& .aio__header {
			& {padding: 0;}
			& h1.aio__title {font-size: 32px;}
			& h2 {font-size: 16px;}
		}
		& .aio__products {
			& {}
			& .listing__products {margin-top:24px}
		}
		& .aio__video {
			& {aspect-ratio: 1;}
		}
		& .aio__grid {
			& {}
			& .aio__grid-item:not(.aio__grid-stretch) {flex-direction: column;}
			& .aio__grid-main {
				& {width: 100%;order: 0;}
				& .aio__grid-card {
					& {}
					& .aio__text {
						& {}
						& h2 {font-size: 20px;}
					}
				}
			}
			& .aio__grid-aside {
			    & {width: 100%;order: 2;}
				@media screen and (max-width: 991px) and (min-width: 768px) {
					& .aio__grid-card {
						& {flex-direction: row;gap: 24px;}
						& .aio__thumb {aspect-ratio: 12 / 9;}
					}
				}
			}
			& .aio__grid-col {
				& {font-size: 1.25em;}
		        & .aio__text {padding: 24px;}
			}
			& .aio__grid-sticky {order: 0;position: relative;top: 0}
			& .aio__grid-banner {
				& {}
				& .aio__text {font-size: 1.25em;}
			}
			& .aio__grid-card {
				& {}
				& .aio__text {padding: 0;}
			}
		}
		& .aio__last {
			& {}
			&:not(.aio__last-pb) {padding-bottom: 0;}
			& img {}
			& .aio__title {}
				& .items {flex-wrap: wrap;justify-content: flex-start;}
			& .item {
				& {width: 40%;font-size: 1.25em;}
			}
		}
		& .aio__win {
			& {}
			& .aio__slider {
				& {margin: 16px calc(-1 * var(--gap));width: calc(100% + 2 * var(--gap));--gap: 8px;}
				& .owl-buttons {
					& {}
					& > div {
						& {}
						&.owl-prev {left: 0;}
						&.owl-next {right: 0;}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.aio {
		& {}
		& .aio__title {font-size: 24px;}
		& .aio__block {padding: 24px 0;}
		& .aio__header {
			& {background: var(--black);display: flex;flex-direction: column-reverse;padding-bottom: 0;}
			.aio__white & {flex-direction: column;}
			& .container {position: relative;}
			& .aio__header-aio__text {max-width: 100%;align-items: center;margin-bottom: 24px;}
			& h1.aio__title {text-align: center;padding: 0;line-height: 1.4;}
		}
		& .aio__banner {
			& {flex-direction: column-reverse;color: var(--black);gap: 24px;padding-top: 24px;}
			& img {position: relative;}
			& .aio__text {
				& {max-width: 100%;}
			}
		}
		& .aio__video {
			& {aspect-ratio: 1 / 1.5;}
		}
		& .aio__grid {
			& {padding: 32px 0;}
			& .aio__grid-item {gap: 24px;flex-direction: column;}
			& .aio__grid-main {
				& {gap: 24px;}
				& .aio__grid-card {
					& {width: 100%;gap: 24px;}
				}
			}
			& .aio__grid-col {
				& {width: 100%;font-size: 1em;}
		        & .aio__text {padding: 16px;}
			}
			& .aio__grid-banner {
				& {display: flex;flex-direction: column-reverse;gap: 24px;}
				& .aio__text {position: relative;top: 0;left: 0;max-width: 100%;font-size: 1em;}
			}
			& .aio__grid-card {
				& {gap: 24px;}
			}
		}
		& .aio__last {
			& {}
			&:not(.aio__last-pb) {padding-bottom: 0;}
			& .items {gap: 24px;}
			& .item {
				& {width: 100%;font-size: 1em;}
				& h2 {margin-top: 16px;}
			}
		}
		& .aio__win {
			& {--gap: 4px;}
			& .aio__slider {
				& {margin: 16px 0;width: 100%;}
				& .owl-buttons {
					& {display: none}
				}
			}
			& .item {padding: 24px 24px 0;}
		}
	}
}