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

.workable__main-container {
    width: var(--full);
    padding: var(--padding);
    background: var(--neowhite);
}

.workable__inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--width);
    padding: var(--l-spacing) 0;
    margin: 0 auto;
}

.workable__inner-container .main-title {
    font-size: var(--h2);
    font-weight: var(--extralight);
}

.workable__inner-container .main-title strong {
    font-weight: var(--regular);
    color: var(--neopaleblue);
}

#whr_embed_hook {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--xxxl-spacing);
    row-gap: var(--l-spacing);
    margin-top: var(--l-spacing);
}

#whr_embed_hook > div {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing);
    width: 100%;
}

.whr-group {
    font-size: var(--bigtext);
    font-weight: var(--medium);
    color: var(--neopaleblue);
}

.whr-items {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.whr-item {
    list-style-type: none;
}

.whr-title a {
    font-size: var(--text);
    font-weight: var(--light);
    line-height: var(--lh-5);
    color: black;
    transition: font-weight .4s ease;
}

.whr-title a:hover {
    font-weight: var(--regular);
}

.whr-info {
    display: none;
}

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

}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    #whr_embed_hook {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--xl-spacing);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    #whr_embed_hook {
        grid-template-columns: repeat(1, 1fr);
        row-gap: var(--m-spacing);
    }
}