main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
}

.car {
    display: grid;
    gap: 1rem;
}

.car .price {
    justify-self: end;
}

.car .actions {
    justify-self: center;
}

.car .description {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) { 
    main {
        padding: 0 3rem;
    }

    .car {
        grid-template-areas: 
            "img img"
            "desc price"
            "desc details"
            "desc actions"
            "desc ."
        ;
        grid-template-columns: 1fr 1fr;
    }

    .car .price {
        grid-area: price;
    }
    
    .car .actions {
        grid-area: actions;
    }
    
    .car .description {
        grid-area: desc;
    }

    .car .details {
        grid-area: details;
    }

    .car .carousel {
        grid-area: img;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) { 
    .car .carousel .picture-list img {
        width: clamp(15rem, calc(100vw - 2 * (2rem + 0.5rem)), 54rem);
        height: clamp(10rem, 60vw, 36rem);
    }

    .car .carousel .picture-list {
        width: clamp(15rem, calc(100vw - 2 * (2rem + 0.5rem)), 54rem);
    }
}

@media (min-width: 1200px) {
    .car {
        grid-template-areas: 
            "img desc"
            "price desc"
            "details desc"
            "actions desc"
            ". desc"
        ;
        column-gap: 2rem;
        grid-template-columns: 1fr 1fr;
    }
}