/* Adding variables */
@import url("../../css/variables.css");

.general-content__main-container {
    width: var(--full);
    margin: 0 auto;
}

.general-content__main-container.dark {
    position: relative;
}

.general-content__main-container.dark:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    max-width: 60%;
    height: 100%;
    background: var(--dark-gradient-alt);
    z-index: -1;
}

.section-reverse.general-content__main-container.dark:before {
    right: 0;
    left: unset;
    width: 60%;
    max-width: 60%;
    height: 100%;
    background: var(--dark-gradient-alt);
    z-index: -1;
}

.general-content__main-container.light {
    background: linear-gradient(90deg, var(--neowhite) 60%, white 60%);
}

.general-content__main-container.light.section-reverse {
    background: linear-gradient(-90deg, var(--neowhite) 60%, white 60%);
}

.general-content__inner-container {
    display: flex;
    gap: 0;
    width: var(--width);
    margin: 0 auto;
    max-height: 550px;
}

.general-content__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--xl-spacing);
    padding: var(--l-spacing) 10rem var(--l-spacing) 0;
    width: calc(var(--full) - 40%);
    max-width: 60%;
}

.section-reverse .general-content__content {
    padding: var(--l-spacing) 0 var(--l-spacing) 10rem;
}

.general-content__content-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m-spacing);
    color: white;
    font-weight: var(--light);
}

.general-content__content-text h2 {
    font-size: var(--h2);
    font-weight: var(--extralight);
    line-height: var(--lh-n);
    color: white;
}

.light .general-content__content-text h2 {
    color: black;
}

.general-content__content-text h2 strong {
    font-weight: var(--regular);
    color: var(--neopaleblue);
}

.general-content__content-text p {
    margin-bottom: var(--s-spacing);
}

.general-content__content-text a {
    color: var(--neopaleblue);
    transition: color 0.4s ease;
}

.general-content__content-text a:hover {
    color: var(--neoblue);
}

.light .general-content__content-text {
    color: black;
}

.general-content__content-text p:last-child,
.light .general-content__content-text p:last-child {
    margin-bottom: 0;
}

.general-content__side-image {
    display: flex;
    width: calc(var(--full) - 60%);
    max-width: 40%;
    padding: var(--l-spacing) 0 0;
    margin-right: 0;
    background: white;
    position: relative;
}

.general-content__side-image img {
    width: 100%;
    max-width: calc(100% + 15rem);
    right: 0;
    margin-left: -5rem;
    position: relative;
    object-fit: contain;
}

.section-reverse .general-content__side-image img {
    max-width: calc(100% + 15rem);
    margin-left: 7rem;
    position: relative;
    object-fit: contain;
}

.general-content__side-image .side-image__video-container {
    display: flex;
    align-items: center;
    max-width: calc(100% + 15rem);
    right: 0;
    margin-left: -5rem;
    position: relative;
    object-fit: contain;
}

.section-reverse .general-content__side-image .side-image__video-container {
    display: flex;
    align-items: center;
    max-width: calc(100% + 15rem);
    left: 0;
    margin-left: 0;
    margin-right: -5rem;
    position: relative;
    object-fit: contain;
}

.general-content__side-image .video-js.custom-video {
    width: var(--full);
    height: 100%;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .general-content__main-container.dark {
        background: var(--dark-gradient-alt);
    }

    .general-content__main-container.dark:before {
        content: unset;
    }

    .general-content__main-container.light {
        background: var(--neowhite);
    }

    .general-content__inner-container {
        flex-direction: column;
        gap: var(--xl-spacing);
        padding: var(--padding);
        max-height: unset;
    }

    .general-content__content,
    .section-reverse .general-content__content {
        gap: var(--l-spacing);
        padding: var(--l-spacing) 0 0;
        width: var(--full);
        max-width: var(--full);
    }

    .general-content__side-image {
        width: var(--full);
        max-width: var(--full);
        padding: 0;
        background: none;
    }

    .general-content__content-text {
        align-items: center;
    }

    .general-content__content-text h2 {
        text-align: center;
    }

    .general-content__content-text p {
        max-width: var(--full);
        text-align: center;
    }

    .general-content__side-image img,
    .section-reverse .general-content__side-image img {
        max-width: var(--full);
        margin: 0;
    }

    .general-content__side-image .side-image__video-container,
    .section-reverse .general-content__side-image .side-image__video-container {
        max-width: var(--full);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    
}