@vendasta/store/stencils/details-stencil.component.css

Components and data for Store

.details { position: relative; margin: 0 auto 20px; background: #ffffff; box-shadow: 0 3px 10px rgba(33, 33, 33, 0.3); overflow: hidden; font-size: 16px; }

.details-header { display: flex; height: 180px; }

.details-column-0 { display: flex; width: 66%; }
@media screen and (max-width: 600px) { .details-column-0 { width: 100%; } }

.details-column-0-1 { display: flex; width: 25%; min-width: 120px; }
@media screen and (max-width: 600px) { .details-column-0-1 { width: 50%; } }

.details-icon { height: 120px; width: 120px; border-radius: 50%; }

.details-title { margin: 20px 0 20px 20px; height: 32px; width: 250px; }
@media screen and (max-width: 600px) { .details-title { width: 120px; } }

.details-column-1 { width: 34%; display: flex; flex-direction: column; }
@media screen and (max-width: 1100px) { .details-column-1 { width: 0; } }

.details-column-1-0 { height: 32px; margin: 10px 0; }
@media screen and (max-width: 600px) { .details-column-1-0 { width: 0; margin: 0; } }

.details-column-1-1 { height: 70px; }
@media screen and (max-width: 600px) { .details-column-1-1 { height: 0; } }

.details-box-large { display: flex; width: 650px; height: 150px; }
@media screen and (max-width: 1100px) { .details-box-large { width: 100%; } }

.details-body { display: flex; height: 500px; width: 100%; }

.details-body-column-0 { width: 10%; display: flex; flex-direction: column; }
@media screen and (max-width: 600px) { .details-body-column-0 { width: 0%; } }

.details-body-column-1 { width: 56%; display: flex; flex-direction: column; }
@media screen and (max-width: 600px) { .details-body-column-1 { width: 100%; } }

.details-icon-small { margin-bottom: 24px; display: flex; height: 32px; width: 32px; border-radius: 50%; }

.details-line { margin-bottom: 24px; height: 32px; width: 400px; }
@media screen and (max-width: 600px) { .details-line { width: 100%; margin-right: 10px; } }

.details-body-column-2 { width: 34%; display: flex; flex-direction: column; }
@media screen and (max-width: 1100px) { .details-body-column-2 { width: 0; } }

.details-box { height: 70px; margin-bottom: 10px; }
@media screen and (max-width: 600px) { .details-box { width: 0; margin: 0; } }