/*.gallery-list-wrap {
    padding: var(--padding-3xl) 0;
}*/
.album-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap-xl);
}

.album-card {
    background: var(--dda-surface, #ffffff);
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--dda-outline, #E4E2E6);
    flex: 1 1 100%;
    /* max-width: 382px;*/
    display: flex;
    flex-direction: column;
    max-width: 100%;
    flex: 0 1 calc(33.33% - var(--gap-xl));
}

    .album-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
.album-link { 
    height: 100%;
}

    .album-link:hover {
        background-color: var(--dda-primary);
    }

        .album-link:hover .album-title {
            color: var(--dda-primary-variant, #00AEEF); /* highlight color on hover */
        }

.album-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.album-date {
    background: var(--dda-primary-variant, #DBF5FF);
    border-radius: 9px;
    border: 1px solid var(--dda-primary, #00677D);
    padding: 4px 12px;
    color: var(--dda-on-primary-variant, #004E5F);
    font-size: var(--font-caption);
    font-weight: 400;
    line-height: var(--line-height-caption);
    display: inline-block;
    width: fit-content;
}

.album-title {
    color: var(--dda-on-surface, #000000);
    font-size: var(--font-h5);
    font-weight: 400;
    line-height: var(--line-height-h5);
}

@media (max-width:1280px) {

    .album-card {
        flex: 1 1 calc(50% - var(--gap-xl));
    }
}

@media (max-width:767px) {

    .album-container {
        justify-content: center;
    }
    .album-card {
        flex: 1 1 100%;
    }
    .album-card img {
        width: 100%;
        height: 310px;
    }
     
}