@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

.album-container {
    position: relative;
    max-width: 450px;
    max-height: 300px;
    width: 100%;
    height: 250px;
    display: flex;
    align-items: flex-end;
    font-family: 'Roboto', sans-serif;
}

.album-image {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.album-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all ease-in-out 0.15s;
}

.album-image img:hover {
    filter: blur(1.5px);
    transform: scale(1.15);
}

.album-container::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80%;
    pointer-events: none;
    background: linear-gradient(0deg,
            hsl(0, 0%, 0%, 0.79) 0%,
            hsla(0, 0%, 0%, 0.754) 7.4%,
            hsla(0, 0%, 0%, 0.668) 15.3%,
            hsla(0, 0%, 0%, 0.642) 23.4%,
            hsla(0, 0%, 0%, 0.599) 31.6%,
            hsla(0, 0%, 0%, 0.53) 39.9%,
            hsla(0, 0%, 0%, 0.455) 48.2%,
            hsla(0, 0%, 0%, 0.377) 56.2%,
            hsla(0, 0%, 0%, 0.297) 64%,
            hsla(0, 0%, 0%, 0.217) 71.3%,
            hsla(0, 0%, 0%, 0.137) 78.1%,
            hsla(0, 0%, 0%, 0.1) 84.2%,
            hsla(0, 0%, 0%, 0.086) 89.6%,
            hsla(0, 0%, 0%, 0.017) 94.1%,
            hsla(0, 0%, 0%, 0.004) 97.6%,
            hsla(0, 0%, 0%, 0) 100%);
}

.album-text {
    pointer-events: none;
    color: white;
    font-size: larger;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

.album-text>span:first-of-type {
    color: white;
    font-size: x-large;
}

.album-month {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.album-section>h1 {
    margin-bottom: 12px;
}

.album-section h2 {
    font-size: larger;
    margin: 0;
    font-weight: 500;
}

.album-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 600px;
    margin: auto;
    margin-top: 24px;
}

.form-row {
    flex: 1;
    display: flex;
}

.form-row>label {
    flex: 1;
}

.form-row>input {
    flex: 2;
}