body {
    background-color: var(--green-light-1);
}

.hero-section {
    height: 450px;
    background-size: cover !important;
    background-position: center !important;
}

.hero-section .section-container {
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font: 700 48px/1.3 var(--all-round-gothic);
    color: var(--color-text-titles);
    text-align: center;
    text-shadow: 0 0 20px #00000075;
}

.ele-category-title {
    text-align: center;
    font: 600 36px/1.3 var(--Inter);
    color: var(--green-dark-2);

    margin-bottom: 40px;
}

ul.elephants-list {
    margin: 0 auto 90px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
}

@media (min-width: 768px) {
    ul.elephants-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 991px) {
    h1 {
        font: 700 80px/1.3 var(--all-round-gothic);
    }

    ul.elephants-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 70px 5%;
    }
}