.AboutCampCourageBannerBg {
    width: 100%;
    min-height: 60vh;
    height:50vw;
    max-height: 42vw;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background: url(../MISTRAL_CUTOUTS_CAMP_COURAGE_BACK.png);
    z-index: 1;
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 5rem;
}
.AboutCampBannerTextContainer {
    width: 52%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align:left;
}
.CampBannerHeaderPrefix {
    filter: drop-shadow(2px 3px 5px rgba(17, 17, 17, 0.5)) !important;
    font-size: 6.2rem;
    line-height: 6.5rem;
    margin: 0;
}
.CampBannerHeaderMain {
    filter: drop-shadow(2px 3px 5px rgba(17, 17, 17, 0.5)) !important;
    font-size: 11.5rem;
    line-height: 11.5rem;
    margin: 0;
}

.AboutCampCourageBannerFront {
    width: 100%;
    height: 100%;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background: url(../MISTRAL_CUTOUTS_CAMP_COURAGE_FRONT.png);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
.AboutCampPhotoContainerMain{
    width:70%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
}
.AboutCampPhotoMockupCard {
    background: white;
    box-shadow: 3px 5px 5px rgba(17, 17, 17, 0.3);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 1rem;
    width: 30vw;
    min-width: 24rem;
    max-width: 26rem;
    aspect-ratio: 22/18;
    transform: rotate(-4deg);
    animation: swaySides 8s infinite ease-in-out alternate;
}
.PhotoSectionMainPhoto {
    width: 100%;
    height: 100%;
    background: url(../AboutPhotosMain.png);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.AboutCampMainText{
    max-width:26rem;
}
.AboutCampMainText p {
    line-height:32px;
}
.GoldenSpan {
    font-weight: 800 !important;
    padding: 0 0.3rem;
    background: #F8C614;
    line-height: 16px !important;
}
.PhotosInfoCard {
    margin-top: 6rem;
    position: relative;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    gap:2rem;
    width: 70%;
    min-width:40rem;
    max-width:60rem;
    min-height: max-content;
    box-shadow: 0px 4px 6px rgba(10,10,10, 0.3);
    background-color: white;
    overflow-x:clip;
}
.PhotoCameraIcon {
    position: absolute;
    top: -2rem;
    left: calc(50% - 2rem);
    width: 4rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: white;
    display: grid;
    place-content: center;
    box-shadow: 0px 4px 4px rgba(10,10,10, 0.3);
}
.NavyStrongSpan {
    background-color:#0B0D34;
    padding:0rem 0.4rem;
    color:white;
}
.PhotosList{
    margin:1rem 0rem;
    width:100%;
    display:flex;
    gap:1rem;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
.PhotoDoubleGroup {
    width: min-content;
    display: flex;
    gap: 1rem;
    align-content:center;
    justify-content:center;
}
.MockPhotoSmall {
    background: white;
    box-shadow: 3px 3px 8px rgba(17, 17, 17, 0.3);
    padding: 0.4rem 0.4rem 0.8rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 10vw;
    min-width: 8rem;
    max-width: 14rem;
    aspect-ratio: 22/18;
}
.TiltPhotoLeft {
    transform: rotate(-2deg);
}
.TiltPhotoRight {
    transform: rotate(2deg);
}

/* NOTEBOOK */
@media screen and (max-width:1640px) and (min-width:1200px) {
    .AboutCampCourageBannerBg {
        width: 100%;
        min-height: 40vw;
        max-height: 46vw;
        padding: 4rem;
    }

    .AboutCampBannerTextContainer {
        width: 100%;
        min-width:50%;
        max-width:60%
    }

    .CampBannerHeaderPrefix {
        font-size: 7vw;
        line-height: 7vw;
    }

    .CampBannerHeaderMain {
        font-size: 10vw;
        line-height: 10vw;
    }

    .AboutCampPhotoContainerMain {
        width: 90%;
       
    }
}
/*TABLET LANDSCAPE*/
@media screen and (max-width:1199px) and (min-width:990px) {
    .AboutCampCourageBannerBg {
        max-height: 60vh;
        padding: 3rem;
    }

    .AboutCampBannerTextContainer {
        width: 100%;
        min-width: 50%;
        max-width: 60%
    }

    .CampBannerHeaderPrefix {
        font-size: 5rem;
        line-height: 5rem;
    }

    .CampBannerHeaderMain {
        font-size: 8rem;
        line-height: 8rem;
    }

    .AboutCampPhotoContainerMain {
        width: 100%;
        gap: 3rem;
    }
    .AboutCampPhotoMockupCard {
        width: 30vw;
        min-width: 20rem;
        max-width: 26rem;
    }
}
/* TABLET */
@media screen and (max-width:989px) and (min-width:576px) {
    .AboutCampCourageBannerBg {
        max-height: 60vh;
        padding: 3rem 2rem !important;
    }
    .AboutCampBannerTextContainer {
        width: 100%;
        min-width: 50%;
        max-width: 60%
    }
    .CampBannerHeaderPrefix {
        font-size: 4.6rem;
        line-height: 4.6rem;
    }

    .CampBannerHeaderMain {
        font-size: 7.4rem;
        line-height: 7.4rem;
    }
    .AboutCampPhotoContainerMain {
        width: 100%;
        gap: 3rem;
        flex-direction:column;
    }
    .PhotosInfoCard {
        padding: 2rem 1.6rem;
        gap: 2rem;
        width:100%;
        min-width: 20rem;
        max-width: 60rem;
    }
}
/* MOBILE */
@media screen and (max-width:575px) {
    .AboutCampCourageBannerBg {
        max-height: 60vh;
        padding: 2rem !important;
        align-items:flex-start;
    }
    .AboutCampBannerTextContainer {
        width: 100%;
        min-width: 50%;
        max-width: 90%
    }
    .CampBannerHeaderPrefix {
        font-size: 3rem;
        line-height: 3rem;
    }

    .CampBannerHeaderMain {
        font-size: 5rem;
        line-height: 5rem;
    }
    .AboutCampPhotoContainerMain {
        width: 100%;
        gap: 3rem;
        flex-direction: column;
    }
    .AboutCampPhotoMockupCard {
        width: 30vw;
        min-width: 18rem;
        max-width: 26rem;
        aspect-ratio: 22/18;
        transform: rotate(-4deg);
    }
    .PhotosInfoCard {
        padding:2rem 1.6rem;
        gap: 2rem;
        min-width: 100%;
        max-width: 40rem;
    }
}