.photos .photo{position:relative;cursor:pointer;aspect-ratio:3/2}.photos .photo .image{position:relative;width:100%}.photos .photo .image .header{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;transition:color .3s ease-in-out;width:100%;height:100%;color:var(--dark);font-weight:700;font-size:2rem;text-align:center;text-transform:uppercase}.photos .photo .image img{position:relative;z-index:1;transition:opacity .3s ease-in-out;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.photos .photo:hover .header{color:var(--primary)}.photos .photo:hover .image img{opacity:1}.dots button{transition:background-color .3s ease;margin:0 4px;border-radius:50%;width:12px;height:12px}.dots button.active{background-color:#84cc16}