* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: sans-serif;

}


main {
 display: flex;
 flex-direction: column;
 align-items: center;

}

main .list {
 display: flex;
 flex-wrap: wrap;
 width: 99%;
 max-width: 1024px;
 background: none;
 margin-top: 25px;
 border: 3px none #fff;
 border-radius: 8px;

}

main .list .item {
 display: flex;
 justify-content: center;
 align-items: center;
 border: 3px none #fff;
 border-radius: 8px;
 overflow: hidden;    width: 31.33%; height: 15vw; margin: 5px;    
}

main .list .item img {
 width: 120%;
 max-width: 120%;
 transition: all 0.3s ease;

}

main .list .item img:hover {
 transform: scale(1.2);

}

main .list .item:hover {
 background: rgba(0, 0, 0, 0.05);

}

#pagination {
 margin-top: 20px;

}

#pagination ul {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 background: none;
 padding: 8px;
 border-radius: 50px;
 box-shadow: 0px 10px 15px rgba(255, 255, 255, 0.4);

}

#pagination ul li {
 color: #2b2b2b;
 list-style: none;
 line-height: 45px;
 text-align: center;
 font-size: 18px;
 font-weight: 500;
 cursor: pointer;
 user-select: none;
 transition: all 0.3s ease;

}

#pagination ul li.numb {
 list-style: none;
 height: 45px;
 width: 45px;
 margin: 0 3px;
 line-height: 45px;
 border-radius: 50%;

}

#pagination ul li.numb.first {
 margin: 0px 3px 0 -5px;

}

#pagination ul li.numb.last {
 margin: 0px -5px 0 3px;

}

#pagination ul li.dots {
 font-size: 22px;
 cursor: default;

}

#pagination ul li.btn {
 padding: 0 20px;
 border-radius: 50px; border-color: orange;

}

#pagination li.active,

#pagination ul li.numb:hover,

#pagination ul li:first-child:hover,

#pagination ul li:last-child:hover {
 color: #fff;
 background: orange;

}

@media (max-width: 480px) {
 main .list,
 main .list .item {
   border: 1px solid #fff;
 }
 #pagination ul li {
   transform: scale(0.8);
   margin: 0;
 }
 #pagination ul li.numb {
   width: 35px;
   height: 35px;
   line-height: 35px;
 }
 #pagination ul li.btn {
   padding: 0;
   line-height: 35px;
 }

}