.albums{
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap:24px;
}

@media(max-width:700px){
    .albums{
        grid-template-columns: auto auto auto;
    }
}

@media(max-width:500px){
    .albums{
        grid-template-columns: auto auto;
    }
}

.albums a {
    margin-bottom:12px;
    break-inside:avoid;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.albums a:hover {
  border-color: rgb(221.85, 133.11, 0);
  box-shadow:
    0 0 10px rgba(255, 221.85, 133.11, 0.5),
    0 0 20px rgba(77, 153, 255, 0.3),
    0 4px 20px rgba(77, 153, 255, 0.2);
}

.albums a div {
    padding: 12px;
}

.albums img{
    width:100%;
    display:block;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 12px;
}

.gallery{
    column-count:4;
    column-gap:12px
}
.gallery a{
    display:block;
    margin-bottom:12px;
    break-inside:avoid
}
.gallery img{
    width:100%;
    display:block;
    border-radius:4px
}
.gallery img.landscape{
    aspect-ratio:4/3;
    object-fit:cover
}
.gallery img.portrait{
    aspect-ratio:3/4;
    object-fit:cover
}
@media(max-width:1000px){
    .gallery{column-count:3}
}
@media(max-width:700px){
    .gallery{column-count:2}
}
@media(max-width:500px){
    .gallery{column-count:1}
}