/* linking all css files here */
@import url('partials/header.css');
@import url('partials/news-grid.css');
@import url('partials/footer.css');
@import url('../../global/normalize.css');
@import url('../../global/variables.css');
@import url('../../global/elements.css');

.title-container {
    border-top: 3px solid var(--font-color);
    border-bottom: 3px solid var(--font-color);
    width: 90%;
    margin: 0 auto;

    text-align: center;
    padding: 20px 0;

    position: relative;
    overflow: visible;
}

.news:hover {
    box-shadow: 12px 12px 0px 0px var(--font-color);
    transform: translate(-6px, -6px);   
}

.news:hover {
    img {
        filter: none;
        transform: scale(1.05);
        transition: filter 0.3s ease, transform 0.3s ease;
    }
}

.news1, .text-area1 {
    background-color: white;
    color: var(--font-color);
}

.news2, .text-area2 {
    background-color: var(--accent-red);
    color: white;
}

.news2 .type {
    background-color: white;
    color: var(--font-color);
}

.news3, .text-area3 {
    background-color: var(--secondary-color);
    color: var(--font-color);
}

.news4,  .text-area4 {
    background-color: white;
    color: var(--font-color);
}

.news5,  .text-area5 {
    background-color: var(--accent-pink);
    color: var(white);
}

.news6,  .text-area6 {
    background-color: var(--accent-green);
    color: var(--font-color);
}

.news6 .learn-more {
    background-color: white;
    color: var(--font-color);
    border-color: var(--font-color);
}

.news7, .text-area7 {
    background-color: #7df9ff;
    color: var(--font-color);
}

.news img {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    place-self: start;
    z-index: 1;
    object-position: top;
    filter: grayscale(100%);
}

.text-area-img {
    z-index: 2;
    overflow: hidden;
    grid-column: 1 / 2;
    grid-row:  1 / 2;
    place-self: end;
}

/* Tablets */
@media (max-width: 1024px) {
    .news-container2 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(7, minmax(400px, auto));
        grid-gap: 2em;
        grid-template-areas:
        "news2 news2"
        "news1 news1"
        "news1 news1"
        "news3 news5"
        "news3 news4"
        "news6 news4"
        "news7 news7";
    }

    .text-area h1 {
        font-size: 45px;
    }
    .text-area h3 {
        font-size: 25px;
    }
    .text-area p {
        font-size: 20px;
    }

    .news img {
        filter: none;
    }
}

/* Phones */
@media (max-width: 600px) {
    .news-container2 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: minmax(400px, auto);
        grid-gap: 2em;
        grid-template-areas:
        "news2"
        "news1"
        "news3"
        "news4"
        "news5"
        "news6"
        "news7";
    }

    ul a {
        display: none;
    }

    .logo {
        margin-right: 0;
        max-width: 120px;
    }
    
    .text-area h1 {
        font-size: 8vw;
    }
    .text-area h3 {
        font-size: 5vw;
    }
    .text-area p {
        font-size: 4vw;
    }

    .title-container h1 {
        font-size: 13vw;
    }
    
    .title-container p {
        font-size: 10px;
        max-width: 150px;
    }

    .news-container-title {
        font-size: 7vw;
        margin-bottom: 20px;
    }

    .navbar {
        justify-content: center;
        gap: 0;
        height: 10vh;
    }

    .news img {
        filter: none;
    }
}