@import url('../source/srcIMG.css');
@import url('../source/articlesIMG.css');

.articles_mains { --greycolorARTICLES: rgba(241, 241, 241, 0.603); }

article#art-presented {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    border-bottom: 2px solid var(--lightBLUE);
    padding: 0; margin: 1.5%;
    width: 97%; height: 500px;
    position: relative;
    /* border-radius: 20px; */
}

.AesthecTITLE {
    position: absolute;
    top: 0; right: 0;
    background: linear-gradient(to left, black, transparent);
    width: 100%; height: 100%;
    /* border-radius: 20px; */
} .AesthecTITLE * {
    color: white;
    position: absolute;
    right: 0;
} .AesthecTITLE h1 {
    font-size: 65px;
    right: 40px;
} .AesthecTITLE p {
    margin-top: 100px;
    font-size: 18px;
    right: 80px;
}

.articles_mains_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    --heightForArticleMAIN: 170px;
}

.articles_mains_grid article {
    position: relative;
    width: calc(100% - (2% * 2)); height: var(--heightForArticleMAIN);
    margin: 2%;
}

.articles_mains_grid article a {
    position: absolute;
    top: 0; left: 0;
    background: #e9e9ed5b;
    width: 100%; height: 100%;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
    border: 2px solid transparent;
} .articles_mains_grid article a:hover { border-color: var(--lightBLUE); }

.articleFromART_CLS {
    position: absolute;
    top: 0; left: 0;
    border-radius: 15px 0 0 15px;
    width: var(--heightForArticleMAIN); height: var(--heightForArticleMAIN);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.articleFromART_SecondCLS {
    position: absolute;
    top: 0; right: 0;
    padding: 10px;
    width: calc(100% - var(--heightForArticleMAIN) - (10px * 2));
    height: calc(var(--heightForArticleMAIN) - (10px * 2));
    color: black;
    text-decoration: none;
}

.articleFromART_SecondCLS h1 {
    position: absolute;
    top: 0; left: 10px;
}

.articleFromART_SecondCLS p {
    position: absolute;
    top: 55px; left: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: initial;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.555);
}

.articleFromART_SecondCLS i {
    position: absolute;
    bottom: 10px; right: 10px;
    background: white;
    border-radius: 7px;
    padding: 10px;
    transition: 0.2s ease-in-out;
} .articleFromART_SecondCLS i:hover { box-shadow: var(--boxshadowOFFICIAL); }

@media screen and (max-width: 1154px) {
    .articleFromART_SecondCLS p {
        line-clamp: initial;
        -webkit-line-clamp: 3;
    }
    .articleFromART_SecondCLS i {
        left: -40px; right: auto;
    } .articleFromART_SecondCLS i:hover { box-shadow: none; }
}

@media screen and (max-width:1078px) {
    .articles_mains_grid { grid-template-columns: repeat(1, 1fr); }
}

@media screen and (max-width:865px) {
    .articles_mains { width: 100% !important; }
    article#art-presented {
        width: 100%;
        margin: 0; top: 0;
    }
    .articles_mains_grid article a {
        background: white;
    }
    .articles_mains {
        position: relative;
        top: -100px;
        margin-bottom: -100px;
    }
    article#art-presented {
        height: 300px;
    }
}

@media screen and (max-width:642px) {
    .AesthecTITLE h1 {
        font-size: 45px;
    } .AesthecTITLE p {
        margin-top: 90px;
    }
}

@media screen and (max-width:500px) {
    .AesthecTITLE h1, .AesthecTITLE p { right: auto; }
    .AesthecTITLE {
        background: linear-gradient(to top, black, transparent);
    }
}

@media screen and (max-width:626px) {
    .articleFromART_SecondCLS h1 { font-size: 24px; }
    .articleFromART_SecondCLS p { top: 35px; }
}

@media screen and (max-width:426px) {
    .articles_mains_grid { --heightForArticleMAIN: 130px; }
}

@media screen and (max-width:418px) {
    .articleFromART_SecondCLS h1 { font-size: 19px; }
    .AesthecTITLE h1 { font-size: 34px; }
}