/* title */

.title {
    font-family: 'SpaceX', sans-serif;
}

/* main */

main {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 3em;
}

/* article */

article {
    display: flex;
    justify-content: center;
}

article > a {
    display: flex;
    align-items: center;
    justify-content: center;

    transition: 200ms;
}

article > a > h2 {
    position: absolute;
    color: var(--clr-neutral);
    background-color: var(--clr-primary);
    padding-left: 5px;
    padding-top: 6px;
    padding-right: 4px;
    border: solid var(--clr-neutral) 2px;
    z-index: 1;
}

article > a > img {
    height: 25rem;
}

article > a:hover {
    transition-duration: 200ms;
    filter: brightness(70%);
}

/* different text style */

.art1 > a > h2 {
    font-family: 'tesla';
}

.art2 > a > h2 {
    font-family: var(--ff-terz);
}

.art3 > a > h2 {
    font-family: 'spacex';
}

@media (max-width: 1770px) {
    main {
        display: block;
    }

    .art2 {
        padding: 3em 0 3em 0;
    }

    article > a > img {
        height: 23vh;
        min-height: 258px;
    }

    article {
        font-size: .5em;
    }
}