/* ============================================ MONLIS Website - Home Studios Section 4 studio cards in 2x2 grid Figma node:21:5405 ============================================ *//* ========================================== STUDIOS CONTAINER Figma specs:- Background:#000000 - Padding:5px vertical - Gap:10px between cards ========================================== */.home-studios {width:100%;background-color:var(--color-black);padding:5px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}/* ========================================== STUDIOS ROW 2 cards per row Figma:gap 10px ========================================== */.home-studios__row {display:flex;align-items:flex-start;justify-content:center;gap:10px;overflow:hidden;cursor:pointer;}/* ========================================== STUDIO CARD Figma specs:- Width:955px - Height:~947px - Border-radius:15px - Overflow:hidden ========================================== */.home-studios__card {position:relative;width:955px;height:947px;border-radius:15px;overflow:hidden;display:block;text-decoration:none;}/* ========================================== CARD IMAGE Full cover with slight overflow for effect ========================================== */.home-studios__card-image {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:15px;transition:transform 0.5s ease;}.home-studios__card:hover .home-studios__card-image {transform:scale(1.05);}/* ========================================== CARD OVERLAY Subtle dark overlay for text readability ========================================== */.home-studios__card-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0.5) 100% );border-radius:15px;pointer-events:none;}/* ========================================== CARD CTA (Text Content) Position:absolute bottom Figma:bottom 40px,centered ========================================== */.home-studios__card-cta {position:absolute;bottom:40px;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;}/* ========================================== CARD SUBTITLE ("studio") Figma specs:- Font:Josefin Sans Thin (100) or Thin Italic - Size:50px - Line-height:60px - Color:#FFFFFF - Text-transform:lowercase ========================================== */.home-studios__card-subtitle {font-family:var(--font-primary);font-weight:100;font-size:50px;line-height:60px;color:var(--color-white);text-transform:lowercase;margin:0;}/* Italic variant for alternating cards */.home-studios__card-subtitle--italic {font-style:italic;}/* ========================================== CARD TITLE (Studio Name) Figma specs:- Font:Josefin Sans Light (300) - Size:70px - Line-height:84px - Color:#FFFFFF - Text-transform:uppercase ========================================== */.home-studios__card-title {font-family:var(--font-primary);font-weight:300;font-size:70px;line-height:84px;color:var(--color-white);text-transform:uppercase;margin:0;}/* ========================================== RESPONSIVE STYLES ========================================== *//* Large Desktop (1920px - 1440px) */@media (max-width:1920px) {.home-studios__card {width:calc(50vw - 10px);height:auto;aspect-ratio:955 / 947;}}/* Desktop (1440px) */@media (max-width:1440px) {.home-studios__card-subtitle {font-size:40px;line-height:48px;}.home-studios__card-title {font-size:56px;line-height:67px;}.home-studios__card-cta {bottom:30px;}}/* Tablet (1024px) */@media (max-width:1024px) {.home-studios__card-subtitle {font-size:32px;line-height:38px;}.home-studios__card-title {font-size:44px;line-height:53px;}.home-studios__card-cta {bottom:25px;}}/* Mobile (768px) - Stack cards vertically */@media (max-width:768px) {.home-studios {padding:5px;gap:5px;}.home-studios__row {flex-direction:column;gap:5px;width:100%;}.home-studios__card {width:100%;aspect-ratio:3 / 4;}.home-studios__card-subtitle {font-size:24px;line-height:29px;}.home-studios__card-title {font-size:32px;line-height:38px;}.home-studios__card-cta {bottom:20px;}}/* Small Mobile (480px) */@media (max-width:480px) {.home-studios__card-subtitle {font-size:20px;line-height:24px;}.home-studios__card-title {font-size:26px;line-height:31px;}.home-studios__card-cta {bottom:15px;gap:2px;}}