/* ============================================ MONLIS Website - Studio About Section 4 feature cards with images Figma node:2:3061 ============================================ *//* ========================================== ABOUT CONTAINER Figma specs:- Background:white - Padding:128px top ========================================== */.studio-about {width:100%;background-color:var(--color-white);padding:128px 0 80px;}.studio-about__container {max-width:1340px;margin:0 auto;padding:0 48px;}/* ========================================== SECTION HEADER ========================================== */.studio-about__header {display:flex;align-items:center;gap:32px;margin-bottom:56px;}.studio-about__header-line {width:80px;height:2px;background-color:var(--color-mine-shaft);flex-shrink:0;}.studio-about__title {font-family:var(--font-secondary);font-weight:600;font-size:30px;line-height:30px;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-mine-shaft);margin:0;}/* ========================================== DESCRIPTION TEXT ========================================== */.studio-about__description {font-family:var(--font-secondary);font-weight:400;font-size:20px;line-height:32.5px;color:var(--color-mine-shaft);max-width:1109px;margin:0 0 80px 0;}/* ========================================== FEATURES GRID 4 columns ========================================== */.studio-about__features {display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}/* ========================================== FEATURE CARD Figma specs:- Height:~453px - Border-radius:30px - Shadow:0px 20px 25px -5px rgba(0,0,0,0.1) ========================================== */.studio-about__card {position:relative;height:453px;border-radius:30px;overflow:hidden;box-shadow:0px 20px 25px -5px rgba(0,0,0,0.1),0px 8px 10px -6px rgba(0,0,0,0.1);}/* Card background image */.studio-about__card-image {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}/* Dark gradient overlay */.studio-about__card-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.1) 100%);pointer-events:none;}/* Inner shadow */.studio-about__card-shadow {position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0px 0px 120px 0px rgba(0,0,0,0.6);pointer-events:none;}/* Corner decoration */.studio-about__card-corner {position:absolute;top:0;right:0;width:80px;height:80px;border-top:2px solid rgba(255,255,255,0.3);border-right:2px solid rgba(255,255,255,0.3);border-top-right-radius:30px;}/* Number badge */.studio-about__card-number {position:absolute;top:24px;right:24px;width:48px;height:48px;background-color:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-secondary);font-weight:600;font-size:16px;color:var(--color-white);}/* Card content */.studio-about__card-content {position:absolute;left:32px;right:32px;bottom:32px;display:flex;flex-direction:column;gap:24px;}/* Content divider line */.studio-about__card-line {width:100%;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0.6) 100%);}/* Card title */.studio-about__card-title {font-family:var(--font-secondary);font-weight:600;font-size:24px;line-height:30px;letter-spacing:4.8px;text-transform:uppercase;color:var(--color-white);margin:0;}/* Card description box */.studio-about__card-desc-box {background-color:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:25px;}.studio-about__card-desc {font-family:var(--font-secondary);font-weight:400;font-size:16px;line-height:26px;color:var(--color-white);margin:0;}/* ========================================== RESPONSIVE STYLES ========================================== *//* Large Desktop (1440px) */@media (max-width:1440px) {.studio-about__container {padding:0 40px;}.studio-about__features {gap:24px;}.studio-about__card {height:420px;}.studio-about__card-title {font-size:20px;letter-spacing:3px;}}/* Desktop (1200px) */@media (max-width:1200px) {.studio-about {padding:100px 0 60px;}.studio-about__features {grid-template-columns:repeat(2,1fr);}.studio-about__card {height:400px;}.studio-about__title {font-size:26px;}.studio-about__description {font-size:18px;line-height:30px;}}/* Tablet (1024px) */@media (max-width:1024px) {.studio-about {padding:80px 0 50px;}.studio-about__container {padding:0 40px;}.studio-about__header {margin-bottom:40px;}.studio-about__header-line {width:60px;}.studio-about__description {margin-bottom:60px;}}/* Mobile (768px) */@media (max-width:768px) {.studio-about {padding:60px 0 40px;}.studio-about__container {padding:0 20px;}.studio-about__header {flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px;}.studio-about__title {font-size:22px;}.studio-about__description {font-size:16px;line-height:28px;margin-bottom:40px;}.studio-about__features {grid-template-columns:1fr;gap:20px;}.studio-about__card {height:380px;}.studio-about__card-content {left:24px;right:24px;bottom:24px;gap:16px;}.studio-about__card-title {font-size:18px;letter-spacing:2px;}.studio-about__card-desc-box {padding:20px;}.studio-about__card-desc {font-size:14px;line-height:24px;}}/* Small Mobile (480px) */@media (max-width:480px) {.studio-about {padding:40px 0 30px;}.studio-about__container {padding:0 15px;}.studio-about__title {font-size:20px;}.studio-about__description {font-size:15px;line-height:26px;}.studio-about__card {height:350px;}.studio-about__card-number {width:40px;height:40px;font-size:14px;}}