:root{
    --h2-size: 3em;
    --text-padding: 0 40px 0 40px;
}

.main-container{
    margin-top: 150px;
    color: #333;
    text-align: center;
}
.main-container h2{
    font-weight: bold;
}

.main-container h5{
    margin-top: 0;
    padding-top: 0;
    padding: var(--text-padding);
}

.brands{
    display: flex;
    color: white;
    background: rgb(28,118,186);
    background: linear-gradient(180deg, rgba(28,118,186,1) 0%, rgba(18,77,122,1) 35%, rgba(9,37,59,1) 100%);
    justify-content: space-around;
    padding-top: 100px;
    padding-bottom: 100px;
    align-items: center;
}

.brands .text{
    width: 30%;
}

.brands .text p{
    text-align: left;
    line-height: 1.5em;
    border-bottom: 5px solid var(--light_blue);
    padding-bottom: 20px;
}

.brands .grid{
    display: grid;
    width: 60%;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 20px;
}

.brands .grid .grid-brand-logo{
    width: 200px;
    height: 200px;
    border: 5px solid white;
    border-radius: 0px 50px 0px 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgba(255,255,255,0.3);
}

.logo1{
    background-image: url("../img/hardware-brands-logos/acer.png");
}
.logo2{
    background-image: url("../img/hardware-brands-logos/asus.png");
}
.logo3{
    background-image: url("../img/hardware-brands-logos/gigabyte.png");
}
.logo4{
    background-image: url("../img/hardware-brands-logos/hp.png");
}
.logo5{
    background-image: url("../img/hardware-brands-logos/intel.png");
}
.logo6{
    background-image: url("../img/hardware-brands-logos/Logitech.png");
}
.logo7{
    background-image: url("../img/hardware-brands-logos/perfect-choice.png");
}
.logo8{
    background-image: url("../img/hardware-brands-logos/TOSHIBA.png");
}

.more-products{
    margin-top: 100px;
}

.more-products .text p, .note{
    text-align: center;
    padding: var(--text-padding);
}

.note{
    margin-top: 50px;
}

.more-products .grid-products{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
    gap: 20px;
    padding: 0 20px 0 20px;
    grid-auto-rows: 1fr;
}

.product{
    text-align: center;
    border: 2px solid var(--main_blue);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-general);
}

@media(max-width: 1431px){
    .brands{
        flex-direction: column;
        align-items: center;
        padding-top: 0;
    }

    .brands .text{
        width: 100%;
        padding-top: 0;
    }

    .brands .text p{
        padding: var(--text-padding);
        text-align: justify;
        padding-bottom: 20px;
    }

    .brands .grid{
        width: 100%;
        justify-items: center;
    }
}


@media(max-width: 530px){
    .brands{
        padding-bottom: 20px;
    }
    .main-container{
        margin-top: 90px;
    }
    .more-products .grid-products{
        grid-template-columns: repeat(auto-fit, minmax(240px,0.8fr));
        align-content: center;
        justify-content: center;
    }

    .product{    
        padding: 3rem 0;
    }

    .more-products{
        margin-top: 3rem;
    }

    .more-products .text p{
        text-align: justify;
    }

    .more-products .grid-products{
        margin-top: 2rem;
    }
}

@media(max-width: 460px){
    .brands .grid{
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit,100px);
        row-gap: 20px;
        justify-content: space-around;
    }

    .brands .grid .grid-brand-logo{
        width: 100px;
        height: 100px;      
        border-radius: 0;        
    }
}