@import '../../../root/css/root.css';

.album-to-home-link_wrapper {
    margin: 0 0 50px 0;
}

/* ___album-SECTION___ */
.album-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 85px 0 110px 0;
}

.album-main_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    width: 1810px;
}

/* ___ALBUM-ITEMS___ */
.album-items {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: clamp(11.125rem, -0.086rem + 17.416vw, 20.813rem);
    gap: 28px;
    margin: 0 var(--main-indent) 0 var(--main-indent);
}

.album-item {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.album-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.album-item-icon {
    opacity: 0;
    width: clamp(2.75rem, -0.071rem + 4.382vw, 5.188rem);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.album-item:hover .album-item-icon {
    transition: var(--transition);
    opacity: 1;
}

.album-item:not(:hover) .album-item-icon {
    transition: var(--transition-not);
    opacity: 0;
}

.album-item:hover .album-item-image {
    transition: var(--transition);
    -webkit-filter: blur(24px);
    filter: blur(24px);
    transform: scale(110%);
}

.album-item:not(:hover) .album-item-image {
    transition: var(--transition-not);
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: scale(100%);
}

@media all and (max-width: 1810px) {
    .album-main_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        width: 100%;
    }
}

.album-content_wrapper {
    display: flex;
    flex-direction: column;
}


@media all and (max-width: 1610px) {
    .album-to-home-link_wrapper {
        margin: 0 0 41px 0;
    }

    .album-section {
        margin: 70px 0 91px 0;
    }

    .album-items {
        gap: 23px;
    }
}

@media all and (max-width: 1450px) {
    .album-to-home-link_wrapper {
        margin: 0 0 37px 0;
    }

    .album-section {
        margin: 63px 0 82px 0;
    }

    .album-items {
        gap: 20px;
    }
}

@media all and (max-width: 1240px) {
    .album-to-home-link_wrapper {
        margin: 0 0 31px 0;
    }

    .album-section {
        margin: 53px 0 70px 0;
    }

    .album-items {
        gap: 15px;
    }
}

@media all and (max-width: 1030px) {
    .album-section {
        margin: 30px 0 70px 0;
    }

    .album-items {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(9.125rem, -0.013rem + 28.952vw, 18.625rem);
    }

    .album-item-icon {
        width: clamp(2rem, -0.104rem + 6.667vw, 4.188rem);
    }
}

@media all and (max-width: 505px) {
    .album-items {
        grid-template-columns: 1fr;
        grid-auto-rows: clamp(9.125rem, -4.28rem + 67.027vw, 16.875rem);
    }

    .album-item-icon {
        width: clamp(2.5rem, 0.014rem + 12.432vw, 3.938rem);
    }
}