/* Additional CSS for vandring.html */

/* Styles related to the small secondary navigation */
.secondary__nav {
    margin-bottom: 3em;
}

.secondary__nav__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
}

.secondary__nav__link {
    color: black;
    font-size: 1.2rem;
    transition: 100ms ease-in;
}

.secondary__nav__link:hover,
.secondary__nav__link:focus {
    color: rgb(46, 69, 58);
    border-bottom: 1px solid rgb(46, 69, 58);
}

/* Styles related to the main content of vandring.html */
.introduction__paragraph {
    margin-bottom: 1em;
}

.hiking__difficulty__heading,
.hiking_difficulty__paragraph {
    text-align: center;
}

.hiking_difficulty__paragraph {
    margin-bottom: 2em;
}

.hiking__container {
    background-color: rgb(175, 187, 153);
    padding: 2em;
    margin-bottom: 2em;
}

.introduction__container:last-of-type,
.hiking__container:last-of-type {
    margin-bottom: 5em;
}

.hiking__details {
    font-size: .8rem;
    margin-bottom: 1em;
}

.hiking__paragraph {
    margin-bottom: 1em;
}

.hiking__link {
    color: rgb(47, 69, 58);
}

.hiking__link:hover,
.hiking__link:focus {
    color: rgb(28, 41, 35);
    border-bottom: 1px solid rgba(28, 41, 35, .5);
}

/* Media queries for responsive modes */
@media (min-width: 980px) {
    .introduction__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }

    .hiking__container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2em;
        align-items: center;
        padding: 3em;
    }
}