#index-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 200px;
}

@media (max-width: 1440px) {
    #index-page {
        padding: 0 100px;
    }
}

@media (max-width: 768px) {
    #index-page {
        padding: 0 24px;
    }
}

#index-page .items {
    max-width: 1492px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 96px;
    row-gap: 88px;
}

@media (max-width: 1440px) {
    #index-page .items {
        column-gap: 64px;
        row-gap: 48px;
    }
}

@media (max-width: 1200px) {
    #index-page .items {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 64px;
        row-gap: 48px;
    }
}

@media (max-width: 768px) {
    #index-page .items {
        column-gap: 26px;
        row-gap: 24px;
    }
}

#index-page .item {
    transition: all .3s ease-out;
}

#index-page .items:hover .item {
    filter: brightness(.2);
}

#index-page .items .item:hover {
    transform: scale(1.1);
    filter: brightness(1);
}

#index-page .item picture {
    width: 100%;
    height: 100%;
}

#index-page .item picture source,
#index-page .item picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}