.top-area {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:50px var(--page-padding) 20px;
    align-items:start;
}

.top-area h1 {
    font-size:32px;
    font-weight:500;
    margin:0;
    grid-column:1;
}

.top-area h1 a {
    color:inherit;
    text-decoration:none;
}

.controls {
    grid-column:4;
    justify-self:end;
    align-self:start;
}

.categories {
    grid-column:2 / span 2;
    align-self:end;
    display:flex;
    gap:40px;
    margin:0;
}

.categories a {
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.categories a:hover {
    text-decoration:none;
}

.categories a.active {
    text-decoration:wavy underline 1px;
    text-underline-offset:2px;
}

.gallery {
    padding:30px var(--page-padding) 60px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.card {
    aspect-ratio:3 / 2;
    overflow:hidden;
    position:relative;
    cursor:pointer;
}

.card img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.dots {
    position:absolute;
    right:12px;
    bottom:12px;
    display:flex;
    gap:5px;
}

.dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:white;
    opacity:0.9;
}

.series-count{
    position:absolute;
    right:12px;
    bottom:12px;
    color:white;
    font-size:13px;
}

.series-next {
    transform: scaleX(-1);
}

#pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:100px;
    padding:30px 0 60px;
    font-size:16px;
    white-space:nowrap;
}

.page-number {
    display:flex;
    align-items:center;
    gap:20px;
}

.page-number i{
    font-style:normal;
}

#pagination button {
    border:none;
    background:none;
    cursor:pointer;
    font-size:24px;
    font-weight:500;
}

#pageTitle{
    padding:20px var(--page-padding) 0;
    font-size:14px;
}


@media (min-width:1600px){
    .gallery{
        grid-template-columns:repeat(5,1fr);
    }
}


@media (max-width:1200px){
    .gallery{
        grid-template-columns:repeat(3,1fr);
    }
}


@media (max-width:780px){
    .gallery {
        grid-template-columns:repeat(2,1fr);
        padding:30px 40px 60px;
        gap:20px;
    }

    .top-area{
        display:grid;
        grid-template-columns:1fr auto;
        padding:40px 40px 20px;
        gap:20px;
    }

    .top-area h1{
        grid-column:1;
        grid-row:1;
    }

    .controls{
        grid-column:2;
        grid-row:1;
        justify-self:end;
    }

    .categories{
        grid-column:1 / -1;
        grid-row:2;
        display:flex;
        flex-wrap:wrap;
        gap:20px;
    }

    #pagination{
        gap:60px;
        font-size:16px;
    }

    #pagination button{
        font-size:18px;
    }
     #pageTitle{
        padding-left:40px;
        padding-right:40px;
    }

}


@media (max-width:480px){
    .gallery{
        grid-template-columns:1fr;
        padding:20px 40px 40px;
        gap:20px;
    }
}