/* Experiência Acadêmica*/

section.academic{
    background-color: var(--cor-de-fundo-azul);
    width: 100%;
    padding: 82px 0;
    text-align: center;
}

.academic__title{
    font-size: 2rem;
    font-weight: 700;
}

.academic__courses{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: var(--largura-maxima-desktop);
    margin: 0 auto;
    gap: 16px;
}

.academic__courses__list{
    padding: 0;
}

.academic__courses__box{
    text-align: left;
    width: 240px;
}

.academic__courses__item__img{
    object-fit: contain;
    mix-blend-mode: multiply;
    width: 100%;
}

.academic__courses__item__title{
    font-weight: 700;
    font-size: 1.4rem;
}

.academic__courses__item__loading{
    width: 48px;
    height: 48px;
    border: 3px solid var(--cor-botoes);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.academic__courses__item__loading::after {
    content: '';  
    position: absolute;
    box-sizing: border-box;
    left: 20px;
    top: 31px;
    border: 10px solid transparent;
    border-right-color: var(--cor-botoes);
    transform: rotate(-40deg);
}

@keyframes rotation {
    
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }

} 

@media (max-width: 1168px) {

    section.academic{
        padding: 32px 0 0 0;
    }

    .academic__title{
        font-size: 1.4rem;
    }

    .academic__courses{
        width: auto;
        padding: 0 32px 32px 32px;
    }

    .academic__courses__list{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    .academic__courses__box{
        word-wrap: anywhere;
        width: 33%;
    }

    .academic__courses__item__title{
        margin: 0;
    }


}

@media (max-width: 560px){
    
    .academic__courses{
        flex-direction: column;
    }

    .academic__courses__box{
        width: 100%;
        height: auto;
    }

    .academic__courses__item__img{
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .academic__courses__item__title{
        margin: 8px 0 0 0;
    }

    .academic__courses__item__subtitle{
        margin: 0;
    }

    .academic__courses{
        width: auto;
        padding: 0 16px 16px 16px;
    }

}