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

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

.general-content__inner-container {
    display: flex;
    width: var(--full);
    padding: var(--l-spacing) 0;
}

.general-content__inner-container.position-top {
    flex-direction: column-reverse;
    gap: var(--m-spacing);

}

.general-content__inner-container.position-right {
    flex-direction: row;
    gap: var(--xl-spacing);
}

.general-content__inner-container.position-bottom {
    flex-direction: column;
    gap: var(--m-spacing);
}

.general-content__inner-container.position-left {
    flex-direction: row-reverse;
    gap: var(--xl-spacing);
}

.general-content__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--m-spacing);
}

.position-right .general-content__content,
.position-left .general-content__content {
    width: var(--full);
    max-width: calc(100% - 350px);
}

.general-content__content h2 {
    font-family: var(--palmer);
    font-size: calc(var(--h2) * 2);
    font-weight: var(--regular);
    line-height: var(--lh-n);
    color: var(--cyan);
}

.general-content__content p {
    font-size: var(--text-md);
    line-height: var(--lh-4);
    margin-bottom: var(--s-spacing);
}

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

.general-content__content a {
    color: var(--cyan);
    text-decoration: none;
    transition: all 0.4s ease;
}

.general-content__content a:hover {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.general-content__image {
    max-width: 350px;
    width: 100%;
}

.general-content__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--l-spacing);
    object-fit: cover;
    box-shadow: var(--box-shadow);
}

.position-top .general-content__image,
.position-bottom .general-content__image {
    max-width: var(--full);
}

.position-top .general-content__image img,
.position-bottom .general-content__image img {
    max-height: 240px;
    border-radius: var(--l-spacing);
    box-shadow: var(--box-shadow);
}

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

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .general-content__inner-container {
        padding: var(--m-spacing) 0;
    }

    .general-content__inner-container.position-top {
        flex-direction: column;
    }

    .general-content__inner-container.position-right,
    .general-content__inner-container.position-left {
        gap: var(--m-spacing);
    }

    .general-content__image img {
        border-radius: var(--m-spacing);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .general-content__inner-container.position-right,
    .general-content__inner-container.position-left {
        flex-direction: column;
    }

    .position-right .general-content__content,
    .position-left .general-content__content {
        width: var(--full);
        max-width: var(--full);
    }

    .general-content__image,
    .position-top .general-content__image,
    .position-bottom .general-content__image {
        max-width: var(--full);
    }

    .general-content__image img,
    .position-top .general-content__image img,
    .position-bottom .general-content__image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 200px;
        border-radius: var(--m-spacing);
        object-fit: cover;
    }
}