/* ==========================================================
   SchoolConnect 2.0
   PHOTOS.CSS V3.0
   DEEL 1/5
   HERO - LAYOUT - ZOEKBALK
========================================================== */


/* ==========================================
   PAGINA
========================================== */

.photosPage{

    width:100%;
    max-width:1450px;

    margin:0 auto;

    padding:32px;

}


/* ==========================================
   HERO
========================================== */

.photosHero{

    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    min-height:240px;

    margin-bottom:30px;

    padding:40px 30px;

    border-radius:28px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2B92B5 0%,
        #3CA4C9 50%,
        #51B585 100%
    );

    box-shadow:0 20px 50px rgba(43,146,181,.18);

}


    /* Decoratieve cirkels */

    .photosHero::before{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.photosHero::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    left:-80px;
    bottom:-100px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

/* ==========================================
   HERO CONTENT
========================================== */

.heroContent{

    position:relative;

    display:flex;

    align-items:center;

    gap:30px;

    z-index:2;

}


/* ==========================================
   ICOON
========================================== */

.heroIcon{

    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

}

.heroIcon img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

}


/* ==========================================
   TITELS
========================================== */

.photosHero h1{

    margin:0;

    color:white;

    font-size:42px;

    font-weight:800;

}


.photosHero p{

    margin-top:10px;

    font-size:18px;

    opacity:.95;

}


/* ==========================================
   ZOEKBALK
========================================== */

.searchSection{

    margin-bottom:35px;

}


.searchBox{

    display:flex;

    align-items:center;

    gap:16px;

    background:white;

    border-radius:20px;

    padding:18px 24px;

    box-shadow:

        0 8px 24px rgba(0,0,0,.08);

    transition:.25s;

}


.searchBox:focus-within{

    box-shadow:

        0 10px 35px rgba(43,146,181,.18);

}


.searchIcon{

    font-size:22px;

    color:#2B92B5;

}


#albumSearch{

    flex:1;

    border:none;

    outline:none;

    background:none;

    font-size:17px;

    color:#444;

    margin:0;

    padding:0;

}


#albumSearch::placeholder{

    color:#999;

}


/* ==========================================
   BREADCRUMB
========================================== */

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin-bottom:35px;

}


.photosPage .breadcrumb button{

    margin:0;
    width:auto;
    min-width:0;
    height:auto;
    flex:0 1 auto;
    text-align:left;

    padding:4px 0;

    border:0;
    border-radius:0;
    font:inherit;
    cursor:pointer;

    background:transparent;

    color:#2B92B5;

    font-weight:600;

    box-shadow:none;

}


.photosPage .breadcrumb button:hover{

    background:transparent;
    color:#2B92B5;
    text-decoration:underline;

}


/* ==========================================
   GRID
========================================== */

.cardsGrid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));

    gap:26px;

}


/* ==========================================
   VERBERGEN
========================================== */

.hidden{

    display:none !important;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

    .photosHero{

        padding:35px;

    }

    .heroContent{

        flex-direction:column;

        align-items:flex-start;

    }

    .photosHero h1{

        font-size:34px;

    }

}


@media(max-width:600px){

    .photosPage{

        padding:18px;

    }

    .photosHero{

        padding:28px;

        border-radius:22px;

    }

    .heroIcon{

        width:70px;
        height:70px;

        font-size:34px;

    }

    .photosHero h1{

        font-size:28px;

    }

    .photosHero p{

        font-size:15px;

    }

    .searchBox{

        padding:15px 18px;

    }

}
/* ==========================================================
   SchoolConnect 2.0
   PHOTOS.CSS V3.0
   DEEL 2/5
   SECTIES - KLASSEN - ALBUMKAARTEN
==========================================================*/


/* ==========================================
   CONTAINERS
========================================== */

#navigationContainer,
#classesContainer,
#albumsContainer{

    margin-bottom:40px;

}


/* ==========================================
   ALGEMENE KAART
   (wordt gebruikt door photos.js)
========================================== */

.photoCard{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border-radius:24px;

    cursor:pointer;

    transition:
        transform .28s ease,
        box-shadow .28s ease;

    box-shadow:
        0 10px 24px rgba(0,0,0,.06);

    min-height:250px;

}


/* Hover */

.photoCard:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 24px 50px rgba(0,0,0,.14);

}


/* ==========================================
   COVERAFBEELDING
========================================== */

.photoCard img{

    width:100%;

    height:170px;

    object-fit:cover;

    display:block;

    transition:
        transform .45s ease;

}


.photoCard:hover img{

    transform:scale(1.06);

}


/* ==========================================
   GEEN FOTO BESCHIKBAAR
========================================== */

.photoCard img[src=""],
.photoCard img:not([src]){

    height:170px;

    background:
        linear-gradient(
            135deg,
            #d9edf4,
            #edf8fb
        );

}


/* ==========================================
   INHOUD
========================================== */

.photoCardContent{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

}


/* ==========================================
   TITELS
========================================== */

.photoCard h2{

    margin:0;

    color:#234;

    font-size:22px;

    font-weight:700;

    line-height:1.3;

}


.photoCard h3{

    margin:0;

    color:#234;

    font-size:20px;

    font-weight:700;

}


.photoCard p{

    margin-top:10px;

    color:#666;

    line-height:1.6;

    font-size:15px;

}


/* ==========================================
   BADGE
========================================== */

.photoBadge{

    display:inline-flex;

    align-items:center;

    width:max-content;

    margin-top:auto;

    padding:8px 14px;

    border-radius:999px;

    background:#eef8fb;

    color:#2B92B5;

    font-size:13px;

    font-weight:700;

}


/* ==========================================
   OVERLAY OP FOTO
========================================== */

.photoCard::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:170px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.22),
            rgba(0,0,0,0)
        );

    pointer-events:none;

}


/* ==========================================
   HOVER GLOW
========================================== */

.photoCard::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    border:2px solid transparent;

    transition:.30s;

}


.photoCard:hover::after{

    border-color:
        rgba(43,146,181,.25);

}


/* ==========================================
   TITEL OP FOTO
   (optioneel indien photos.js dit gebruikt)
========================================== */

.photoOverlay{

    position:absolute;

    left:22px;

    bottom:92px;

    right:22px;

    color:white;

    font-size:22px;

    font-weight:700;

    z-index:2;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);

}


/* ==========================================
   ALBUM INFO
========================================== */

.albumInfo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

    gap:12px;

    flex-wrap:wrap;

}


.albumMeta{

    color:#888;

    font-size:14px;

}


.albumCount{

    background:#2B92B5;

    color:white;

    padding:7px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}


/* ==========================================
   KLASKAARTEN
========================================== */

.classCard{

    border-left:6px solid #51B585;

}


/* ==========================================
   SECTIEKAARTEN
========================================== */

.sectionCard{

    border-left:6px solid #2B92B5;

}


/* ==========================================
   ALBUMKAARTEN
========================================== */

.albumCard{

    border-left:6px solid #ECC407;

}


/* ==========================================
   LAADANIMATIE
========================================== */

.photoCard{

    animation:
        cardFade .45s ease;

}


@keyframes cardFade{

    from{

        opacity:0;

        transform:
            translateY(18px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

    .photoCard{

        min-height:220px;

    }

    .photoCard img{

        height:155px;

    }

}


@media(max-width:600px){

    .photoCard{

        border-radius:20px;

    }

    .photoCard img{

        height:145px;

    }

    .photoCardContent{

        padding:18px;

    }

    .photoCard h2{

        font-size:19px;

    }

}
/* ==========================================================
   SchoolConnect 2.0
   PHOTOS.CSS V3.0
   DEEL 3/5
   FOTOGALERIJ
==========================================================*/


/* ==========================================
   FOTOCONTAINER
========================================== */

#photosContainer{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(170px,1fr));

    gap:18px;

    margin-bottom:40px;

}


/* ==========================================
   FOTO TEGEL
========================================== */

.photoThumbnail{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:#f5f7fa;

    cursor:pointer;

    aspect-ratio:1 / 1;

    box-shadow:
        0 6px 18px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.photoThumbnail:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 36px rgba(0,0,0,.15);

}


/* ==========================================
   FOTO
========================================== */

.photoThumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .45s ease;

}


.photoThumbnail:hover img{

    transform:scale(1.08);

}


/* ==========================================
   DONKERE OVERLAY
========================================== */

.photoThumbnail::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.25),
            rgba(0,0,0,0)
        );

    opacity:0;

    transition:.30s;

}


.photoThumbnail:hover::before{

    opacity:1;

}


/* ==========================================
   ZOOM ICOON
========================================== */

.photoThumbnail::after{

    content:"＋";

    position:absolute;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%) scale(.6);

    width:52px;

    height:52px;

    border-radius:50%;

    background:
        rgba(255,255,255,.90);

    color:#2B92B5;

    font-size:30px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.30s;

}


.photoThumbnail:hover::after{

    opacity:1;

    transform:
        translate(-50%,-50%) scale(1);

}


/* ==========================================
   LAAD PLACEHOLDER
========================================== */

.photoThumbnail.loading{

    background:
        linear-gradient(
            90deg,
            #ececec 25%,
            #f8f8f8 50%,
            #ececec 75%
        );

    background-size:250% 100%;

    animation:
        shimmer 1.5s infinite linear;

}


@keyframes shimmer{

    from{

        background-position:
            200% 0;

    }

    to{

        background-position:
            -200% 0;

    }

}


/* ==========================================
   LAZY LOAD
========================================== */

.photoThumbnail img{

    opacity:0;

    transition:
        opacity .35s ease,
        transform .45s ease;

}


.photoThumbnail img.loaded{

    opacity:1;

}


/* ==========================================
   FOCUS
========================================== */

.photoThumbnail:focus{

    outline:none;

}


.photoThumbnail:focus-visible{

    outline:3px solid #2B92B5;

    outline-offset:3px;

}


/* ==========================================
   ANIMATIE BIJ LADEN
========================================== */

.photoThumbnail{

    animation:
        photoFade .35s ease;

}


@keyframes photoFade{

    from{

        opacity:0;

        transform:
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            scale(1);

    }

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

    #photosContainer{

        grid-template-columns:
            repeat(auto-fill,minmax(160px,1fr));

    }

}


@media(max-width:900px){

    #photosContainer{

        grid-template-columns:
            repeat(auto-fill,minmax(145px,1fr));

        gap:15px;

    }

}


@media(max-width:600px){

    #photosContainer{

        grid-template-columns:
            repeat(2,1fr);

        gap:12px;

    }

    .photoThumbnail{

        border-radius:14px;

    }

}


@media(max-width:420px){

    #photosContainer{

        grid-template-columns:
            repeat(2,1fr);

        gap:10px;

    }

}
/* ==========================================================
   SchoolConnect 2.0
   PHOTOS.CSS V3.0
   DEEL 4/5
   LIGHTBOX 3.0
==========================================================*/


/* ==========================================
   LIGHTBOX
========================================== */

#lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        rgba(10,18,28,.94);

    backdrop-filter:blur(12px);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


/* zichtbaar */

#lightbox.active{

    opacity:1;

    visibility:visible;

}


/* ==========================================
   FOTO
========================================== */

#lightboxImage{

    max-width:92vw;

    max-height:82vh;

    border-radius:18px;

    object-fit:contain;

    background:white;

    box-shadow:

        0 30px 70px rgba(0,0,0,.45);

    transform:scale(.96);

    transition:
        transform .30s ease;

}


#lightbox.active #lightboxImage{

    transform:scale(1);

}


/* ==========================================
   ALGEMENE KNOPPEN
========================================== */

#closeLightbox,
#previousPhoto,
#nextPhoto{

    position:absolute;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    color:white;

    font-size:26px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:
        .25s;

}


#closeLightbox:hover,
#previousPhoto:hover,
#nextPhoto:hover{

    background:white;

    color:#2B92B5;

    transform:scale(1.08);

}


/* ==========================================
   POSITIES
========================================== */

#closeLightbox{

    top:30px;

    right:30px;

}


#previousPhoto{

    left:30px;

    top:50%;

    transform:translateY(-50%);

}


#nextPhoto{

    right:30px;

    top:50%;

    transform:translateY(-50%);

}


#previousPhoto:hover{

    transform:
        translateY(-50%) scale(1.08);

}


#nextPhoto:hover{

    transform:
        translateY(-50%) scale(1.08);

}


/* ==========================================
   DOWNLOAD
========================================== */

#downloadPhoto{

    position:absolute;

    bottom:34px;

    left:50%;

    transform:
        translateX(-50%);

    padding:14px 26px;

    border-radius:999px;

    background:#2B92B5;

    color:white;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:.25s;

    box-shadow:

        0 10px 24px rgba(43,146,181,.35);

}


#downloadPhoto:hover{

    background:#51B585;

    transform:
        translateX(-50%) translateY(-2px);

}


/* ==========================================
   FOTOTELLER
========================================== */

#photoCounter{

    position:absolute;

    top:32px;

    left:50%;

    transform:
        translateX(-50%);

    padding:10px 18px;

    border-radius:999px;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    color:white;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==========================================
   TOETSENBORD HINT
========================================== */

.lightboxHint{

    position:absolute;

    bottom:95px;

    left:50%;

    transform:
        translateX(-50%);

    color:rgba(255,255,255,.65);

    font-size:13px;

}


/* ==========================================
   ANIMATIE
========================================== */

#lightboxImage{

    animation:
        lightboxFade .35s ease;

}


@keyframes lightboxFade{

    from{

        opacity:0;

        transform:
            scale(.92);

    }

    to{

        opacity:1;

        transform:
            scale(1);

    }

}


/* ==========================================
   SCROLL BLOKKEREN
========================================== */

body.lightboxOpen{

    overflow:hidden;

}


/* ==========================================
   TOUCH
========================================== */

#lightbox{

    touch-action:pan-y;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

    #lightboxImage{

        max-width:96vw;

        max-height:74vh;

    }

}


@media(max-width:700px){

    #previousPhoto,
    #nextPhoto{

        width:48px;

        height:48px;

        font-size:22px;

    }

    #closeLightbox{

        width:48px;

        height:48px;

        font-size:22px;

    }

    #downloadPhoto{

        width:calc(100% - 40px);

        max-width:320px;

        text-align:center;

    }

}


@media(max-width:500px){

    #photoCounter{

        top:18px;

        font-size:13px;

    }

    #previousPhoto{

        left:10px;

    }

    #nextPhoto{

        right:10px;

    }

    #closeLightbox{

        top:12px;

        right:12px;

    }

}
/* ==========================================================
   SchoolConnect 2.0
   PHOTOS.CSS V3.0
   DEEL 5/5
   DESIGN SYSTEM - RESPONSIVE - PERFORMANCE
==========================================================*/


/* ==========================================
   DESIGN TOKENS
========================================== */

:root{

    --sc-primary:#2B92B5;
    --sc-primary-light:#3CA4C9;
    --sc-green:#51B585;
    --sc-yellow:#ECC407;
    --sc-red:#E4572E;

    --sc-bg:#F4F7FA;
    --sc-card:#FFFFFF;

    --sc-text:#243447;
    --sc-text-light:#667085;

    --sc-radius-xs:10px;
    --sc-radius-sm:16px;
    --sc-radius:22px;
    --sc-radius-lg:28px;

    --sc-shadow-small:
        0 4px 12px rgba(0,0,0,.05);

    --sc-shadow:
        0 12px 30px rgba(0,0,0,.08);

    --sc-shadow-large:
        0 22px 50px rgba(0,0,0,.12);

    --sc-transition:.28s ease;

}



/* ==========================================
   ALLE KAARTEN
========================================== */

.photoCard,
.photoThumbnail,
.searchBox,
.photosHero{

    box-sizing:border-box;

}



/* ==========================================
   VLOEIENDE ANIMATIES
========================================== */

.photoCard,
.photoThumbnail,
button,
a,
input,
img{

    transition:

        background var(--sc-transition),
        color var(--sc-transition),
        border-color var(--sc-transition),
        box-shadow var(--sc-transition),
        transform var(--sc-transition);

}



/* ==========================================
   SELECTIE UITZETTEN
========================================== */

.photoCard,
.photoThumbnail,
.heroBack,
#previousPhoto,
#nextPhoto,
#closeLightbox{

    user-select:none;

}



/* ==========================================
   AFBEELDINGEN
========================================== */

img{

    max-width:100%;

    display:block;

}



/* ==========================================
   TOETSENBORD TOEGANKELIJKHEID
========================================== */

button:focus-visible,
a:focus-visible,
.photoThumbnail:focus-visible,
.photoCard:focus-visible,
input:focus-visible{

    outline:3px solid var(--sc-primary);

    outline-offset:3px;

}



/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EEF2F5;

}

::-webkit-scrollbar-thumb{

    background:#B7C7D1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8EA6B3;

}



/* ==========================================
   SECTIES
========================================== */

section{

    animation:

        fadeSection .35s ease;

}

@keyframes fadeSection{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================================
   LOADER
========================================== */

.loadingSpinner{

    width:44px;

    height:44px;

    margin:40px auto;

    border-radius:50%;

    border:4px solid #E8EDF2;

    border-top-color:var(--sc-primary);

    animation:

        spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/* ==========================================
   LEGE STATUS
========================================== */

.emptyState{

    text-align:center;

    padding:70px 30px;

    color:var(--sc-text-light);

}

.emptyState h2{

    margin-bottom:15px;

}

.emptyState p{

    max-width:420px;

    margin:auto;

}



/* ==========================================
   TOUCH
========================================== */

.photoThumbnail{

    -webkit-tap-highlight-color:transparent;

}

button{

    -webkit-tap-highlight-color:transparent;

}



/* ==========================================
   PERFORMANCE
========================================== */

.photoThumbnail{

    will-change:transform;

}

.photoCard{

    will-change:transform;

}

#lightboxImage{

    will-change:transform,opacity;

}



/* ==========================================
   PRINT
========================================== */

@media print{

    .photosHero,
    .searchSection,
    #downloadPhoto,
    #closeLightbox,
    #previousPhoto,
    #nextPhoto,
    #photoCounter{

        display:none !important;

    }

}



/* ==========================================
   TABLET
========================================== */

@media(max-width:1024px){

    .cardsGrid{

        grid-template-columns:

            repeat(2,1fr);

    }

}



/* ==========================================
   MOBIEL
========================================== */

@media(max-width:768px){

    .cardsGrid{

        grid-template-columns:1fr;

    }

    .breadcrumb{

        gap:8px;

    }

    .breadcrumb button{

        font-size:13px;

        padding:8px 14px;

    }

}



/* ==========================================
   KLEINE SMARTPHONES
========================================== */

@media(max-width:420px){

    .photosHero{

        padding:22px;

    }


    .searchBox{

        border-radius:16px;

    }

}



/* ==========================================
   REDUCED MOTION
========================================== */

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}
/* =====================================================
   FOTO SECTIES
===================================================== */

.photo-card{

    position:relative;

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    text-align:center;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 4px 16px rgba(0,0,0,.08);

}

.photo-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,.15);

}

.photo-section-icon{

    font-size:52px;

    margin-bottom:18px;

}

.photo-card-title{

    font-size:22px;

    font-weight:700;

    color:#2B92B5;

}

.photo-card-subtitle{

    margin-top:8px;

    color:#666;

    font-size:14px;

}

.photo-card-arrow{

    position:absolute;

    right:20px;

    top:20px;

    font-size:26px;

    color:#2B92B5;

}
/* ==========================================
   FOTOALBUMMEN
========================================== */

.photo-album-cover{

    width:100%;
    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:16px 16px 0 0;

    background:#f4f4f4;

}

.photo-album-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.3s;

}

.photo-card:hover .photo-album-cover img{

    transform:scale(1.05);

}

.photo-card-body{

    padding:14px;

}

.photo-card-info{

    margin-top:6px;

    color:#777;

    font-size:13px;

}
/* ==========================================================
   AVCONNECT STANDAARD TERUGKNOP
========================================================== */

.newsBackButton{

    background:#2B92B5;
    color:#FFFFFF;

    border:none;
    border-radius:10px;

    padding:10px 18px;

    font-family:"Comic Neue",sans-serif;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    flex-shrink:0;

}

.newsBackButton:hover{

    background:#237A98;

    color:#FFFFFF;

}

.photosPage .breadcrumb [aria-current="page"]{
    font-weight:700;
    color:#234;
}

.photosPage .breadcrumb button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:4px;
}