#camp-img {
    height: 243px;
    width: 453px;

    border-radius: var(--medium-l, 16px);
    background: url(../assets/card-1.jpeg) lightgray 50% / cover no-repeat;
}

#camp-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--large, 24px);
    flex: 1 0 0;
}

#camp-info-date {
    color: var(--Neutrals-black, #131212);
    text-align: center;

    /* Bold/body-l */
    font-family: Nunito;
    font-size: var(--Font-size-body-l, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#camp-info-title {
    color: var(--Secondary-darkest, #3A5645);
    text-align: center;

    /* Bold/heading-l */
    font-family: Nunito;
    font-size: var(--Font-size-heading-l, 36px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Copy in index */
.tag {
    display: flex;
    padding: var(--tiny, 4px) var(--small, 12px);
    justify-content: center;
    align-items: center;

    border-radius: var(--x-large, 100px);
    background: var(--Neutrals-lighter-grey, #ECEBEB);
    white-space: nowrap;
}

.event-tile-body-text {
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    align-self: stretch;
    overflow: hidden; */
    color: var(--Neutrals-dark-grey, #626262);
    text-overflow: ellipsis;

    /* Medium/body-l */
    font-family: Nunito;
    font-size: var(--Font-size-body-l, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    margin-bottom: 0;
}

/* End Copy in index */

#camp-info-description {
    overflow: hidden;
    color: var(--Neutrals-darkest-grey, #3C3C3C);
    text-overflow: ellipsis;

    /* Medium/body-l */
    font-family: Nunito;
    font-size: var(--Font-size-body-l, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#camp-content {
    margin-bottom: var(--xx-large, 40px);
}

#camp-content-card {
    display: flex;
    padding: var(--xx-large, 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--xx-large, 40px);
    align-self: stretch;

    border-radius: var(--large, 24px);
    border: 1px solid var(--Neutrals-lighter-grey, #ECEBEB);
    background: var(--Neutrals-white, #FFF);
    box-shadow: -5px 8px 11.6px 0px rgba(74, 74, 74, 0.10);
}

#camp-content-nav {
    border-radius: var(--medium, 8px);
    border: 1px solid var(--Neutrals-lighter-grey, #ECEBEB);
    width: 100%;
}

.camp-content-nav-button {
    width: 100%;
    border: none;
    background: none;
    padding: 0;

    color: var(--Neutrals-black, #131212);
    text-align: center;

    /* Bold/body-l */
    font-family: Nunito;
    font-size: var(--Font-size-body-l, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.camp-content-nav-button a {
    width: 100%;
    height: 100%;
    padding: var(--large, 24px) 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camp-content-nav-button:not(.active):hover {
    /* background: var(--Secondary-light, #E2F7EA); */
}

.camp-content-nav-button.active {
    background: var(--Secondary-light, #E2F7EA);
}

#info-for-parents,
#info-for-volunteers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: var(--xx-large, 40px); */
    align-self: stretch;
}

#info-for-volunteers {
    display: none;
}

/* .info-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--x-small, 8px);
} */

.accordion {
    width: 100%;
}

.accordion-item {
    border: none;
}

#camp-content h2 {
    color: var(--Neutrals-black, #131212);

    /* Bold/heading-m */
    font-family: Nunito;
    font-size: var(--Font-size-heading-m, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#camp-content h3 {
    color: var(--Neutrals-black, #131212);

    font-family: Nunito;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
}

.accordion-button {
    color: var(--Neutrals-black, #131212);
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding-left: 0!important;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--Neutrals-black, #131212);
    background: none;
    box-shadow: none;
}

#camp-content li {
    margin-bottom: 12px;
    color: var(--Neutrals-darkest-grey, #3C3C3C);

    /* Medium/body-l */
    font-family: Nunito;
    font-size: var(--Font-size-body-l, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#camp-content li.explanation {
    list-style: none;
    font-style: italic;
    font-size: 15px;
}

#camp-content  p {
    overflow: hidden;
    color: var(--Neutrals-darkest-grey, #3C3C3C);
    text-overflow: ellipsis;
    margin-bottom: 12px;

    /* Medium/body-l */
    font-family: Nunito;
    font-size: var(--Font-size-body-l, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.info-button-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 768px) {
    #web-container>section#camp-info-section {
        padding: 0;
        flex-direction: column;
        gap: var(--large, 24px);
    }

    #camp-info {
        padding: 0px var(--large, 24px);
        gap: var(--medium, 16px);
    }

    #camp-img {
        width: 100%;
        border-radius: 0;
    }

    #camp-content-card {
        padding: 0;
        border-radius: var(--large, 24px);
        gap: var(--small, 12px);
    }

    #camp-content-nav {
        border-top-left-radius: var(--large, 24px);
        border-top-right-radius: var(--large, 24px);
        border: none;
        border-bottom: 1px solid var(--Neutrals-lighter-grey, #ECEBEB);
    }

    #camp-content-nav button:first-child {
        border-top-left-radius: var(--large, 24px);
    }

    #camp-content-nav button:last-child {
        border-top-right-radius: var(--large, 24px);
    }

    #info-for-parents,
    #info-for-volunteers {
        padding: var(--large, 24px);
    }
}