.categoriesSection {
    width: 100%;
    height: auto;
    padding: 40px 0 30px 0;
}

.categoriesSection>h1 {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    font-family: var(--font2);
    font-size: 210%;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: capitalize;
    color: #373435;
}

.categoriesSection>h1>span {
    font-weight: 400;

}

.categoriesSection>.innerSpacing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.oneCategory:nth-child(4){
    grid-area: 2 / 2 / 3 / 3;
}

.oneCategory {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    transition: 200ms ease-out;
    color: black;
}

.oneCategory:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.oneCategory:hover img{
    border-radius: 1.5rem;
}

.oneCategory>img {
    transition: 200ms ease-out;
    width: 100%;
    height: auto;
    border-radius: 3rem;
    display: block;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.oneCategory>h1 {
    text-align: center;
    margin: 18px auto 15px auto;
    text-transform: capitalize;
    font-size: 100%;
    font-family: var(--font2);
    font-weight: 600;
    width: 80%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

@media only screen and (max-width: 992px) {
    .categoriesSection>h1{
        font-size: 180%;
    }

    .categoriesSection>.innerSpacing {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .oneCategory:nth-child(4){
        grid-area: auto;
    }
}

@media only screen and (max-width: 768px) {
    .categoriesSection>h1{
        font-size: 165%;
    }
}

@media only screen and (max-width: 576px) {
    .categoriesSection>h1{
        font-size: 150%;
    }

    .categoriesSection>.innerSpacing {
        grid-template-columns: repeat(1, 1fr);
    }
}