main{
    padding-inline: 2em;

    display: flex;
    flex-direction: column;
    gap: 2em;
}

.product-hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.product-hero .product-img img{
    width: 100%;
    border-radius: var(--border-radius);
}

.product-hero .product-data{
    width: 100%;
    
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.product-hero .product-data .data-title span{
    color: var(--fifth-clr);
    font-weight: bold;
}

.product-hero .product-data .price{
    color: var(--secondary-clr);
    font-size: 2em;
}

.product-hero .product-data form ul{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.regular-button{
    font-size: 1.2em;
    font-weight: bold;
}

@media(min-width: 1024px){
    .product-hero{
        display: grid;
        grid-template-columns: auto 50%;
    }

    .product-hero .product-img{
        width: 80%;
    }

    .product-hero .product-data{
        gap: 3em;
    }

}

@media(min-width: 1800px){
    .product-hero .product-data .data-title h1,
    .product-hero .product-data .price{
        font-size: 2vw;

    }
    .product-hero .product-data .data-title span{
        font-size: 1vw;
    }

    .product-var label{
        font-size: 1vw;
    }

    .product-var input,
    .product-var select,
    .regular-button{
        padding: 1vw;
    }

}