.topics {
    background: var(--blue-gradient);
    text-align: center;
    padding: 1em 0;
}

.topic-title {
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 300;
    margin: 1em 0 1em;
}

.topics-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.topic-item {
    margin: 2em 0.5em;
}

.button-card-topic {
    color: var(--color-white);
    background-color: var(--color-orange);
    padding: 1em;
    text-decoration: none;
    font-weight: 500;
}

@media screen and (min-width: 1024px) {
    .topic-title {
        font-size: 1rem;
    }

    .button-card-topic {
        font-size: 1rem;
    }

    .button-card-topic {
        cursor: pointer;
        transition: 0.5s ease;
    }

    .button-card-topic:hover {
        background: var(--blue-gradient);
        transition: 0.5s;
    }
}

@media screen and (min-width: 1728px) {
    .topics {
        padding: 3em 40vw;
    }
}