/* DETAIL */

.title {
    font-size: 30px;
}

.detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr) ;
    text-align: left;

}
.detail .image img {
    width: 100%;
}
.detail .image {
    position: relative;
}

.detail .image::before {
    position: absolute;
    width: 300px;
    height: 300px;
    content: '';
    background-color: #94817733;
    z-index: -1;
    border-radius: 190px 100px 170px 180px;
    left: calc(50% - 150px);
    top: 50px;
}

.detail .name {
    font-size: xx-large;
    padding: 40px 0 0 0;
    margin: 0 0 10px 0;
    line-height: 1;
}

.detail .price {
    font-weight: bold;
    font-size: x-large;
    letter-spacing: 7px;
    margin-bottom: 20px;
}

.detail .buttons button {
    background-color: #eee;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

.fa {
    font-size: 15px;
}

.detail .buttons button:nth-child(2){
    background-color: #2F2F2F;
    color: #eee;
    display: inline-flex;
    gap: 20px;
    box-shadow: 0 10px 20px #2F2F2F77;
    cursor: pointer;

}
.detail .buttons button:nth-child(2):hover{
    background: #3f3f3f;
}

.detail .buttons i {
    transform: translateY(-2px);
}

.detail .description {
    font-weight: 300;
    
}


@media screen and (max-width: 650px){
    .detail {
        display: grid;
        grid-template-columns: repeat(1, 1fr) ;
        text-align: center;
        margin-top: 50px;
    
    }
    .detail .image::before {
        top: 0px;
    }
    .detail .name {
        font-size: x-large;
        padding: 40px 0 0 0;
        margin: 0 0 10px 0;
        line-height: 1;
    }
}