.material-page {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30px ;
    gap: 2%;
}

.material-item {
    width: 32%;
    aspect-ratio: 7 / 9;
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
}

.material-item:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #1A1A1A33;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 2s cubic-bezier(0.33, 1, 0.68, 1);
}

.material-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s cubic-bezier(0.33, 1, 0.68, 1);
}
.material-item-title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-table;
    color: #FFFFFF;
    font-size: 28px;
    transition: transform 2s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 2;
}

.material-item:hover:after {
    background-color: #1A1A1A00;
}
.material-item:hover .material-item-title  {
    transform: scale(1.2);
}
.material-item:hover .material-item-img {
    transform: scale(1.2) rotate(10deg);
}