.container:has(.equipment-section) {
    max-width: unset;
}

.site-content:has(.equipment-section) {
    padding: 0px;
}

.equipment-section {
    .top-menu {
        display: flex;
        position: sticky;
        top: calc(92px + var(--wp-admin--admin-bar--height, 0px));
        background-color: #fff;
        justify-content: center;
        /* max-width: var(--wd-container-w); */
        margin: -40px 0px 0px;
        z-index: 50;
		border: 1px solid #aaaaa9;
		border-top: none;

        @media only screen and (max-width: 800px) {
            top: 60px;
        }

        .equipment-categories {
            list-style: none;
            padding: 9px 0px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            scrollbar-width: none;
            overflow-x: auto;
            overflow-y: auto;
            width: 100%;
			margin: 0px;
			max-width: var(--wd-container-w);

            li {
                margin: 0px;
				flex: 1 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				padding: 0px 50px;
				box-sizing: border-box;

				&:after {
					content: '';
					width: 2px;
					height: 12px;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					background: #aaaaa9;
				}

				&:last-child:after {
					content: none;
				}
            }

            .menu-category {
                font-size: 14px;
                box-sizing: border-box;
                white-space: nowrap;
				font-weight: 400;
                color: #aaaaa9;
				background: transparent;
				min-height: unset;
				padding: 0px;
                transition: color 0.3s ease, background-color 0.3s ease;

                &:hover,
                &.active,
                &:focus-visible {
                    color: #000;
                }
            }
        }

    }

    .equipment-flex {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;

        .equipment-category {
            
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease;

            &.active {
                grid-template-rows: 1fr;
            }

            .content {
                overflow: hidden;
            }
            
            .equipment-item {
                padding: 50px 0px;
                box-sizing: border-box;
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 20px;
                font-size: 16px;
                padding-inline: calc(var(--wd-sp,30px)/ 2);
                max-width: var(--wd-container-w);
                margin: 0 auto;

                @media only screen and (max-width: 800px) {
                    padding: 25px 0px;
                }

                .equipment-title,
                .equipment-description,
                .equipment-gallery {
                    position: relative;
                    z-index: 5;
                }

                .equipment-title {
                    text-align: center;
                    margin: 0px;
                    font-size: 2.8125em;
                    text-transform: uppercase;
                    font-weight: 400;
					line-height: 1;
                    color: #000;

                    @media only screen and (max-width: 800px) {
                        font-size: 1.5em;
                    }

                }

                .equipment-description {
                    text-align: center;
                    font-size: 1em;

					*:last-child {
						margin-bottom: 0px !important;
					}
                }

                .equipment-gallery {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 30px;

					&:has(:nth-child(3):last-child)
					{
						gap: 15px;

						@media only screen and (max-width: 800px)
						{
							gap: 5px;
							margin-top: 25px;
						}

						@media only screen and (max-width: 640px)
						{
							gap: 10px;
							margin-top: 5px;
							flex-wrap: wrap;
						}
					}

					&:has(:nth-child(5):last-child),
					&:has(:nth-child(7):last-child),
					&:has(:nth-child(8):last-child)
					{
						gap: 15px;

						@media only screen and (max-width: 800px) 
						{
							gap: 10px;
							margin-top: 25px;
						}

						@media only screen and (max-width: 640px)
						{
							gap: 5px;
							margin-top: 5px;
							flex-wrap: wrap;
						}
					}

                    &:has(:nth-child(9):last-child)
					{
						gap: 10px;
						flex-wrap: nowrap;

						@media only screen and (max-width: 800px) 
						{
							margin-top: 25px;
						}

						@media only screen and (max-width: 640px)
						{
							gap: 5px;
							margin-top: 5px;
							flex-wrap: wrap;
						}
					}

					@media only screen and (max-width: 800px) 
					{
						gap: 20px;
						margin-top: 10px;
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
						border-radius: 40px;
						overflow: hidden;
					}

					@media only screen and (max-width: 640px)
					{
						gap: 10px;
						margin-top: 5px;
						// flex-wrap: wrap;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
					}

					.gallery-item
					{

						width: 50%;
						position: relative;

						@media only screen and (max-width: 800px) 
						{
							width: 100%;
						}

						&:first-child
						{
							border-top-left-radius: 50px;
							border-bottom-left-radius: 50px;

							img
							{
								border-top-left-radius: 50px;
								border-bottom-left-radius: 50px;
							}

							@media only screen and (max-width: 800px) 
							{
								border-radius: 0px;

								img
								{
									border-radius: 0px;
								}
							}
						}

						&:last-child
						{
							border-top-right-radius: 50px;
							border-bottom-right-radius: 50px;


							img
							{
								border-top-right-radius: 50px;
								border-bottom-right-radius: 50px;
							}

							@media only screen and (max-width: 800px) 
							{
								border-radius: 0px;

								img
								{
									border-radius: 0px;
								}
							}
						}

						

						img
						{
							width: 100%;
							height: auto;
							max-height: 380px;
							object-fit: cover;
							vertical-align: middle;
							aspect-ratio: 1 / 1.5;

							@media only screen and (max-width: 800px) 
							{
								height: 250px;
							}

							@media only screen and (max-width: 640px)
							{
								height: 150px;
							}
						}
					}

				}

                &:nth-child(2n) {
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0px;
                        left: 50%;
                        transform: translateX(-50vw);
                        width: 100vw;
                        height: 100%;
                        background-color: #F7F7F7;
                    }
                }

                
            }
        }

    }
    
}