@import url('main.css');

/* ======================================= Section Banner ==== */
.banner {
    margin: 8px 0 32px;
}

.banner nav {
    position: relative;
}

.banner img {
    width: 100%;
    border-radius: 8px;
}

.banner .description {
    position: absolute;
    bottom: 0;
    color: var(--color6);
    background: linear-gradient(to top ,var(--black), transparent);
    width: 100%;
    padding: 32px 16px 16px;
    border-radius: 8px;
}

.banner h3 {
    font-size: 3.2rem;
    padding: 8px 0;
}




/* ========================================= Latest Posts ==== */
.latest-posts {
    margin-bottom: 16px;
}

.latest-posts h1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
}

.latest-posts ul {
    /* width: 100%; */
    columns: 2;
}

.latest-posts ul li a {
   display: flex;
   align-items: center;
   border-radius: 16px;
}

.latest-posts ul li:hover a {
    background-color: var(--color6);
}

.latest-posts ul li a span {
    font-size: 4.8rem;
    color: var(--color4);
    padding: 24px;
}

.latest-posts ul li:hover span {
    color: var(--color7);
}

.latest-posts ul li h3 {
    color: var(--color1);
    font-weight: normal;
}

.latest-posts ul li p {
    color: var(--color7);
}




/* ============================================= Shortcut ==== */
.shortcut {
    margin: 16px 0;
}

.shortcut ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: var(--color6);
    border-radius: 0 0 8px 8px;
}

.shortcut ul li {
    width: 200px;
    margin: 16px;
}

.shortcut ul li a img {
    outline: 4px solid transparent;
    border-radius: 8px;
    transition: all .4s;
}

.shortcut ul li a:hover img {
    outline: 4px solid var(--color7);
}

.shortcut ul li p {
    color: var(--color1);
    text-align: center;
    padding-top: 4px;
}








/* =========================================== RESPONSIVE ==== */
@media (max-width: 880px) {
    .latest-posts ul {
        columns: 1;
    }

}