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

.scrollable-side__main-container {
    width: var(--full);
    padding: var(--padding-full);
}

.scrollable-side__inner-container {
    display: flex;
    gap: var(--xl-spacing);
    justify-content: space-between;
    width: var(--width);
    padding: var(--m-spacing) 0;
    margin: 0 auto;
}

.scrollable-side-left-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--s-spacing) + .25rem);
    width: var(--half);
    position: sticky;
    top: var(--xxl-spacing);
    height: 100%;
}

.scrollable-side-left-container .title {
    display: flex;
    align-items: center;
    gap: calc(var(--s-spacing) / 2);
}

.scrollable-side-left-container .title img {
    max-width: 55px;
    max-height: 55px;
}

.scrollable-side-left-container .title h2 {
    font-size: var(--h2);
    font-weight: var(--extralight);
    line-height: var(--lh-n);
}

.scrollable-side-left-container {
    font-size: var(--text);
    line-height: var(--lh-3);
    max-width: 640px;
}

.scrollable-side__right-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 3rem;
    width: calc(var(--full) - 640px);
}

.scrollable-side__feature-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--s-spacing) / 2);
    max-width: calc(50% - var(--m-spacing));
    /* Inner Text */
    font-size: var(--text);
    font-weight: var(--light);
    line-height: var(--lh-2);
}

.scrollable-side__feature-container .title_link {
    color: black;
    transition: color 0.4s ease;
}

.scrollable-side__feature-container .title_link:hover {
    color: var(--neoblue);
}


.scrollable-side__feature-container h3 {
    font-size: var(--blocknav);
    font-weight: var(--regular);
    line-height: var(--lh-2);
    display: inline;
}

.scrollable-side__feature-container .scrollable-side__tag {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    line-height: 1.5;
    text-transform: uppercase;
}

.scrollable-side__tag.featured:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../../images/featured-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}

.scrollable-side__tag.new {
    color: white;
    background: var(--blue-gradient);
    padding: 1px 7px 0px;
}

.scrollable-side__tag.popular:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../../images/popular-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}

.scrollable-side__tag.none {
    display: none;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    .scrollable-side-left-container {
        max-width: 535px;
    }

    .scrollable-side__feature-container {
        max-width: calc(50% - var(--m-spacing));
    }
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .scrollable-side-left-container {
        width: calc(50% - var(--s-spacing));
    }

    .scrollable-side__right-container {
        flex-direction: column;
        width: calc(50% - var(--s-spacing));
    }

    .scrollable-side__feature-container {
        max-width: var(--full);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .scrollable-side__inner-container {
        flex-direction: column;
        gap: var(--l-spacing);
        padding: var(--s-spacing) 0;
    }
    
    .scrollable-side-left-container {
        position: unset;
        width: var(--full);
        max-width: var(--full);
    }

    .scrollable-side-left-container .title img {
        max-width: 45px;
        max-height: 45px;
    }

    .scrollable-side__right-container {
        gap: var(--m-spacing);
        width: var(--full);
        max-width: var(--full);
    }

    .scrollable-side__feature-container {
        max-width: var(--full);
    }
}