:root {
    --block-size: 19.5vw;
}

.learn-first {
    padding-top: var(--block-size);
    position: relative;
    gap: 1rem;
}

.learn-block {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--block-size);
    height: var(--block-size);
    background-color: var(--company-color3);
}

.learn-first-text-container {
    /* padding: 1rem 3.5rem; */
    padding: 1rem var(--block-size);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 2;
}

.learn-first-image {
    width: 100%;
    /* max-height: 80vh;
    object-fit: cover; */
    z-index: 1;
}

.title {
    font-size: 1.15rem;
}

.title-group {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}

.skewed-shape {
    width: 2rem;
    height: 0.8rem;

    position: absolute;
    left: -2.65rem;
    top: 1.25em;

    -webkit-transform: skew(40deg);

    -ms-transform: skew(40deg);

    transform: skew(40deg);

    background-color: var(--company-color1);
}

.learn-first-title {
    margin: 0;
    font-size: 1.25rem;
}

.title-group>hr {
    width: 100%;
    background-color: var(--company-color1);
    border: 1px solid var(--company-color1);
}

.text-content {
    margin: 0;
    text-align: justify;
    hyphens: auto;
}

.channel-group {
    position: relative;
}

.channel-group>h3 {
    margin: 0;
    font-size: 1.25rem;
}

.channel-group>h1,
.channel-group>h1 * {
    margin: 0;
    font-size: 2rem;
    font-family: var(--bold-font);
    color: var(--company-color3);
}

.channel-group .hub {
    color: var(--company-color1);
}

.whats-app-logo {
    display: none;
}

.join-button {
    padding: 1rem 2rem;
    background-color: var(--company-color3);
    color: var(--company-color2);
    font-family: var(--bold-font);
    font-size: 1.5rem;
    -ms-flex-item-align: start;
    -ms-grid-row-align: start;
    align-self: start;
}

@media (width>=1024px) {
    .learn-first {
        /* padding-top: 0; */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0;
    }

    .learn-first-title {
        font-size: 1.5rem;
    }

    .learn-first-text-container,
    .learn-first-image {
        width: 50%;
    }

    .learn-first-text-container {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 1rem 1rem 1rem var(--block-size);
    }

    .whats-app-logo {
        display: block;
        width: 4.5rem;
        height: 4.5rem;
        position: absolute;
        right: -4.5rem;
        bottom: 0;
    }

    .title-group {
        width: 65%;
    }

    .text-content,
    .channel-group {
        width: 65%;
    }
}

@media (width>=768px) {
    :root {
        --block-size: 11.03vw;
    }
}