app-razer-dream:has(.customs-carousel){
	max-width:100%;
	app-template-create, app-template-content, app-content-page{
		max-width:100%;
	}
}
 .customs-carousel{
     --h:auto;
     --accent:#fff;
     --visible:1.05;
     --gap:15px;
     background: #000;
     width:100%;
     max-width: 4320px;
     margin:0 auto;
     position:relative;
     overflow:hidden;
     box-sizing:border-box;
     padding: 2rem 0 0 0;
	 	@media (max-width:900px){
		--h:auto;
		--visible:1.05;
		--gap:15px;
            }
     @media (max-width:600px){
		--h:auto;
		--visible:1.025;
		--gap:10px;
    }
		.for-mobile{
		display: none !important;
	}
	      .gmd {
         font-family: "Material Symbols Rounded",sans-serif;
         font-display: swap;
         font-size: 26px;
         line-height: 1;
         letter-spacing: normal;
         text-transform: none;
         display: inline-block;
         white-space: nowrap;
         word-wrap: normal;
         direction: ltr;
         font-feature-settings: "liga";
         -webkit-font-smoothing: antialiased;
         font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 18 
    }
     .gmd::before {
         content: "" 
    }
     .carousel-wrapper{
        width:100%;
        max-width:1920px;
        margin:0 auto;
        overflow:visible;
    }
     .viewport{
        height:var(--h);
        overflow:visible;
        width:100%;
    }
     .track{
        display:flex;
        gap:var(--gap);
        transition:transform .45s cubic-bezier(.2,.9,.2,1);
        align-items:stretch;
        will-change:transform;
        padding:0 12px;
        direction: ltr;
					 will-change: transform;
    }
     .slide{
        flex:0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
         height:calc(35cqw);
         max-height: 659px;
         max-width: 1920px;
         border-radius:10px;
         display:flex;
         align-items:start;
         justify-content:center;
         color:#fff;
        font-size:clamp(18px,2.4vw,28px);
        box-shadow:0 6px 20px rgba(0,0,0,.08);
         overflow: hidden;
         background:linear-gradient(170deg,#111,#444);
         position:relative;
         left: calc(100% * (var(--visible) - 1)/2);
         background-position: top;
         background-size: cover;
         background-repeat: no-repeat;
						backface-visibility: hidden;
         @media (max-width:1200px){
             height:calc(40cqw);
        }
		@media (max-width:600px){
             height:calc(62cqw);
        }
        @media (max-width:500px){
             height:calc(110cqw);
        }
		@media (max-width:450px){
             height:calc(120cqw);
        }
		@media (max-width:375px){
             height:calc(125cqw);
        }
		@media (max-width:320px){
             height:calc(142cqw);
        }
    }
     .controls{
        position:relative;
        margin-top:12px;
        padding:8px 16px 28px;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        flex-direction: row-reverse;
					 max-width: 1830px;
        margin-left: auto;
        margin-right: auto;
    }
     .nav-group{
        display:flex;
        gap:8px;
        align-items:center;
    }
     .nav-btn{
         background:#222;
         border:1px solid #000;
         padding:10px;
         text-align:center;
         border-radius:48px;
         width: 45px;
         height: 45px;
         cursor:pointer;
         font:inherit;
         font-size: 25px;
         line-height: 1;
         letter-spacing: normal;
         text-transform: none;
         display: inline-block;
         white-space: nowrap;
         word-wrap: normal;
         direction: ltr;
         font-feature-settings: "liga";
         -webkit-font-smoothing: antialiased;
         transition:all .15s ease;
         overflow:hidden;
    }
     .nav-btn:hover{
        border-color:var(--accent);
        color:var(--accent);
    }
    /* Accessible disabled state */
     .nav-btn:disabled{
         opacity:0.55;
         cursor:not-allowed;
    }
     .left-icon.gmd::before {
         content: "chevron_left";
         color: #fff;
						position: relative;
						left: -1px;
						top: -1px;
    }
     .right-icon.gmd::before {
         content: "chevron_right";
         color: #fff;
						position: relative;
						left: -1px;
						top: -1px;
    }
 	.play-icon.gmd::before {
         content: "play_arrow";
         color: #000;
						position: relative;
						left: -1px;
						top: -1px;
    }
			.pause-icon.gmd::before {
         content: "pause";
         color: #000;
						position: relative;
						left: -1px;
						top: -1px;
    }
			.rotation-button{
				padding:10px;
      text-align:center;
      border-radius:48px;
      width: 45px;
      height: 45px;
      cursor:pointer;
      font:inherit;
      font-size: 25px;
      line-height: 1;
     	letter-spacing: normal;
      text-transform: none;
				border: 1px solid black;
				background: #44D62C;
				order: 3;
				> span{
						display: none;
				}
				> span.is-visible{
						display: inline-block;
				}
				&:hover{
					background: #73e161;
				}
			}
     .dots{
        top:60px;
        display:flex;
        flex-flow: row wrap;
        gap:0px;
        row-gap:0px;
        align-items:center;
        justify-content:center;
        width: 100%;
        overflow:hidden;
        margin-left: 98px;
    }
     .dot{
        width:12px;
        height:12px;
        border-radius:50%;
        background:#5C5C5C;
        border:none;
        cursor:pointer;
        margin:12px;
         &:hover{
             outline: 2px solid #fff;
        }
    }
     .dot[aria-current="true"]{
        background:var(--accent);
        box-shadow:0 0 0 4px rgba(6,108,255,.12);
        border-radius: 0;
        transform: rotate(45deg);
         &:hover{
             outline: none;
        }
    }
			@media (max-width:345px){
					.dots{
           padding-right: 3rem;
        }
			}
     @media (max-width:600px){
		.for-mobile{
			display: inherit !important;
		}
		.for-desktop{
			display: none !important;
		}
        .controls{
            padding-bottom:40px;
			justify-content: center;
						.nav-group{
								.prev{
					order: 1;
				}
				.next{
					order: 2;
				}
				.rotation-button{
					order: 3;
					position: absolute;
                    left: calc(100vw - 60px);
				}
			}
        }
        .dots{
            margin-left: 0;
			display: none;
        }
    }
     .slide .container{
         display: grid;
         align-items: start;
         align-content: start;
         text-align: center;
		 			max-width: 750px;
         z-index: 2;
         margin: 0;
		 			padding: 2rem .5rem 2rem .5rem;
		 			overflow: hidden;
		 			position: relative;
						backface-visibility: hidden;
		@media (min-width:501px){
			.container-bg{
				background-image: none !important;
			}
        }
		@media (max-width:500px){
			background: #222;
						.container-bg{
				width: 125%;
                height: 125%;
                position: absolute;
                top: -5%;
                left: -5%;
                z-index: -1;
                filter: blur(10px) saturate(1.25) brightness(0.98);
											will-change: filter;
                background-size: 450% !important;
                background-position: top center !important;
			}
        }
		          h2, p, ul{
             font-family: RazerF5, Arial, sans-serif;
             margin: 0;
             padding: 0;
        }
         p {
             font-family: Roboto, Arial, sans-serif;
             font-size: 1.125rem;
             font-weight: 400;
             line-height: 1.5em;
             padding: .4375rem 0 1.25rem;
        }
         h2{
             font-size: 1.75rem;
             font-weight: 500;
             letter-spacing: 0.0625rem;
             line-height: 1.875rem;
             margin: 0;
             padding: 2.0625rem 0 0;
             @media (max-width:1200px){
                padding: 0;
            }
        }
         ul.links{
             font-family: Roboto, Arial, sans-serif;
             list-style: none;
									display: flex;
  								flex-wrap: wrap;
									justify-content: center;
									column-gap: 3rem;
									li{
											flex-basis: fit-content;
  										box-sizing: border-box;
									}
        }
    }
     .slide.black-text .container{
		@media (min-width:501px){
         color: #000;
        }
		@media (max-width:500px){
         background: #fefefe;
		 color: #000;
        }
    }
     .link-arrow:after {
         content: ">";
         display: inline-block;
         padding-left: 0.1875rem;
         position: relative;
    }
     .slide > picture{
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
         z-index: 1;
         img{
									backface-visibility: hidden;
             width: auto;
             height: calc(35cqw);
			 max-height: 659px;
             object-fit: contain;
             object-position: center top;
             @media (max-width:1200px){
                 object-fit: contain;
                 height:calc(40cqw);
                 max-height: 700px;
            }
			@media (max-width:600px){
                 object-fit: cover;
                 height:calc(62cqw);
            }
            @media (max-width:500px){
                 object-fit: cover;
                 height:calc(100cqw);
            }
			 @media (max-width:450px){
                 object-fit: cover;
                 height:calc(99cqw);
            }
			@media (max-width:375px){
                 object-fit: cover;
                 height:calc(98cqw);
            }
			@media (max-width:320px){
                 object-fit: cover;
                 height:calc(98cqw);
            }
        }
    }
     .slide a {
         color: inherit;
         font-size: 21px;
         font-weight: 400;
						font-family: RazerF5, Arial, sans-serif;
         text-decoration: none;
						@media (max-width:1200px){
							font-size: 17px;
						}
         :hover{
             text-decoration: underline;
        }
    }
     .slide[aria-hidden="true"]{
         pointer-events: none;
							@media (min-width:1900px){
        				 .container, img{
				             filter: blur(4px);
				             scale: 1.05;
				        }
							}
    }
     &:has(.dots > .dot:first-child:last-child) .controls, &:has(.dots:empty) .controls{
         display: none;
    }
}