*,*:after,*:before{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:400;margin:0}body{margin:0;min-height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;align-items:center;justify-content:center;background-color:#252b3c;padding:20px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.icon{display:inline-block;aspect-ratio:1}.icon--25{width:25px}.icon--30{width:30px}.gallery{max-width:830px;width:100%;background-color:#fff;border-radius:4px;padding:30px;display:flex;column-gap:40px;box-shadow:0 3px 20px #0000004d}@media (width <= 768px){.gallery{padding:20px;column-gap:20px}}.gallery__content{display:flex;flex-direction:column;row-gap:30px;flex-grow:1}@media (width <= 576px){.gallery__content{row-gap:20px}}.gallery__total{color:#989595;font-weight:500}.gallery__header{display:flex;justify-content:space-between;align-items:center;column-gap:20px;padding-bottom:10px}.gallery__title{font-size:50px;font-weight:700}@media (width <= 768px){.gallery__title{font-size:40px}}@media (width <= 576px){.gallery__title{font-size:32px}}.gallery__btn{display:flex;align-items:center;justify-content:center;max-width:140px;width:100%;padding:15px 30px;border:1px solid rgba(84,120,236,.6);background-color:transparent;font-weight:700;color:#5478ec;text-transform:uppercase;transition:border-color .3s ease}@media (hover: hover){.gallery__btn{cursor:pointer}.gallery__btn:hover{border-color:#5478ec}}@media (width <= 576px){.gallery__btn{padding:8px 16px}}.gallery__grid{display:grid;grid-template-columns:minmax(1fr,205px);grid-auto-rows:200px;gap:20px;grid-template-areas:"first second second" "third fourth fifth"}@media (width <= 768px){.gallery__grid{grid-auto-rows:160px;gap:15px}}@media (width <= 576px){.gallery__grid{grid-auto-rows:100px;grid-template-areas:"first second" "first second" "third fourth" "third fourth" "fifth fifth"}}@media (width <= 475px){.gallery__grid{grid-template-areas:"first" "second" "third" "fourth" "fifth"}}.gallery__photo{position:relative;-webkit-user-select:none;user-select:none}.gallery__photo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#5478ec80;filter:brightness(.5);opacity:0;transition:opacity .3s ease;box-shadow:0 5px 8px #5478ec80}@media (hover: hover){.gallery__photo:hover:before{opacity:1}.gallery__photo:hover .gallery__action{opacity:1}}.gallery__photo img{width:100%;height:100%;object-fit:cover;object-position:center}.gallery__photo:nth-child(1){grid-area:first}.gallery__photo:nth-child(2){grid-area:second}.gallery__photo:nth-child(3){grid-area:third}.gallery__photo:nth-child(4){grid-area:fourth}.gallery__photo:nth-child(5){grid-area:fifth}.gallery__action{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;column-gap:20px;opacity:0;transition:opacity .3s ease}@media (width <= 768px){.gallery__action{opacity:1}}.gallery__action-btn{background-color:transparent;color:#fff9;border:none;padding:5px;transition:color .3s ease}@media (hover: hover){.gallery__action-btn{cursor:pointer}.gallery__action-btn:hover{color:#fff}}@media (width <= 768px){.gallery__action-btn{color:#5478ecb3}}.sidebar{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex-shrink:0}.sidebar__menu{display:flex;flex-direction:column;align-items:center;row-gap:80px;border-right:2px solid #d5d5d5;padding-right:30px;padding-bottom:50px}@media (width <= 768px){.sidebar__menu{row-gap:60px;padding-right:20px;padding-bottom:30px}}.sidebar__logo{color:#5478ec;rotate:180deg}.sidebar__group{display:flex;flex-direction:column;align-items:center;row-gap:25px}.sidebar__btn{position:relative;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;color:#d5d5d5;padding:5px;transition:color .3s ease}.sidebar__btn:before{content:"";position:absolute;left:calc(100% + 29px);height:calc(100% - 10px);width:2px;background-color:transparent;transition:background-color .3s ease}@media (width <= 768px){.sidebar__btn:before{left:calc(100% + 19px)}}@media (hover: hover){.sidebar__btn{cursor:pointer}.sidebar__btn:hover{color:#5478ec}.sidebar__btn:hover:before{background-color:#5478ec}}.sidebar__btn--active{color:#5478ec}.sidebar__btn--active:before{background-color:#5478ec}.sidebar__link{display:flex;align-items:center;justify-content:center;border-radius:50%;width:46px;aspect-ratio:1;border:1px solid #5478ec}.sidebar__img{width:100%;height:100%;border-radius:inherit}