.introduction-section{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#fff}@media (min-width:768px){.introduction-section{display:grid;flex-direction:row;justify-content:space-between;height:calc(100vh - 6rem);grid-template-areas:"details display";grid-template-columns:1fr 2.5fr;padding:0 2rem}}.introduction-section .details{grid:details;width:100%;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:350px;margin:auto}@media screen and (min-width:768px){.introduction-section .details{display:block;text-align:start}}.introduction-section .details .color-options{display:flex;gap:.5rem;padding:.5rem;justify-content:center;align-items:center;grid-area:color}@media screen and (min-width:768px){.introduction-section .details .color-options{margin:0 1rem;justify-content:start}}.introduction-section .details .color-options .color-option{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid rgba(0,0,0,.5);cursor:pointer;box-shadow:.2rem .2rem .2rem rgba(0,0,0,.5)}.introduction-section .details .color-options .color-option.selected{border:2px solid #000;scale:1.1}.introduction-section .details .info-container{flex-grow:1;display:flex;flex-direction:column;justify-content:start;align-items:center;padding:.5rem;width:100%}@media screen and (min-width:768px){.introduction-section .details .info-container{margin:0;align-items:start;height:unset}}.introduction-section .details .info-container .title{font-size:1.5rem;font-weight:100;margin:0 1rem}@media screen and (min-width:768px){.introduction-section .details .info-container .title{font-size:3rem}}.introduction-section .details .info-container .sub-title{display:inline;font-size:1rem;font-weight:100;margin:0 .5rem 2rem;line-height:0}@media screen and (min-width:768px){.introduction-section .details .info-container .sub-title{margin:0 1rem 2rem}}.introduction-section .details .info-container .price{margin:0 1rem}.introduction-section .details .info-container .desc{flex-grow:1;flex-shrink:1;text-overflow:ellipsis;overflow:auto;white-space:pre-wrap;font-size:.8rem;font-weight:300;margin:1rem 1rem 0}.introduction-section .details .info-container .desc .first-letter{font-size:1.5rem;font-weight:300}@media screen and (min-width:768px){.introduction-section .details .info-container .desc{height:unset;max-height:unset}}.introduction-section .details .form-button-container{margin:1rem;width:80%}.introduction-section .display{display:flex;flex-grow:1;grid-area:display;width:100%;height:50vh}@media (min-width:768px){.introduction-section .display{width:100%;height:90%;max-height:unset}}