.yacht-services-section {
    position: relative;
}

.yacht-services-wrapper {
    display: flex;
    gap: 32px;
}

.yacht-service-item {
    flex: 1 0 calc(33% - 32px);
}

.yacht-service-item:nth-child(1) .yacht-service-media video, .yacht-service-item:nth-child(1) .yacht-service-media img {
    aspect-ratio: 288 / 275;
}

.yacht-service-item:nth-child(2) .yacht-service-media video, .yacht-service-item:nth-child(2) .yacht-service-media img {
    aspect-ratio: 96 / 101;
}

.yacht-service-item:nth-child(3) .yacht-service-media video, .yacht-service-item:nth-child(3) .yacht-service-media img {
    aspect-ratio: 1 / 1;
}

.yacht-service-media video, .yacht-service-media img {
    max-width: 100%;
    max-height: 600px;
    object-fit: cover; 
}

.yacht-service-content {
    color: var(--color-white);
    padding: 20px;
}

.service-title {
    margin-bottom: 24px;
}

.bg-rect-wrapper {
    position: relative;
}

.bg-rect {
    background: var(--color-black);
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    z-index: -1;
    height: 550px;
}

.yacht-services-section .withbg-svg {
    position: absolute;
    top: -85px;
    left: 0;
    right: 0;
    z-index: -1;
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {

    .bg-rect {
        height: 570px;
    }

    .yacht-services-section {
        margin-top: var(--spacing-large);
    }

}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) { 

    .yacht-services-wrapper {
        flex-direction: column;
    }

    .yacht-services-section {
        background: var(--color-black);
        padding-block: var(--spacing-small);
    }

    .yacht-services-section .withbg-svg {
        display: none;
    }
    
}