@use './_responsive.scss' as r;

.subalbums {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
    gap: 15px;

    .subalbum {
        border: 1px solid lightgray;
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;

        .teaser {
            flex: 0 0 200px;
            height: 200px;
            // background-color: lightgray;
            border-radius: 10px;

            display: flex;
            justify-content: center;

            img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .title {
            flex: auto 1 0;
            text-align: center;
        }
    }
}

.breadcrumbs {
    margin: 10px 0;
}

.images {
    margin: 10px 0;

    .download {
        margin: 10px 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: end;

        .button {
            background-color: #7181e3;
            color: black;
            padding: 10px 25px;
            border-radius: 10px;
            font-weight: bold;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}