* { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #ffffff; color: #111111; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } /* HEADER */ header { width: 100%; padding: 24px 30px; display: flex; justify-content: space-between; align-items: center; } .logo, .contact { color: #111111; text-decoration: none; font-size: 13px; font-weight: 400; } .logo:hover, .contact:hover { opacity: 0.5; } /* GALLERY */ main { width: 100%; } .gallery { width: 100%; padding: 20px 30px 0; } .slide { display: none; width: 100%; } .slide.active { display: block; } /* PAINTING */ .slide img { display: block; width: auto; max-width: 80%; height: 65vh; object-fit: contain; margin: 0 auto; } /* DETAILS */ .details { width: 100%; max-width: 900px; margin: 18px auto 0; text-align: center; } .details h1 { margin: 0 0 6px; font-size: 13px; font-weight: 400; text-align: center; } .details p { margin: 2px 0; font-size: 12px; color: #555555; text-align: center; } /* PREVIOUS / NEXT */ .controls { width: 80%; max-width: 900px; margin: 35px auto 0; display: flex; align-items: center; justify-content: space-between; } .controls button { border: 0; background: none; padding: 0; color: #111111; font-family: inherit; font-size: 12px; cursor: pointer; } .controls button:hover { opacity: 0.5; } /* PHONE */ @media (max-width: 700px) { header { padding: 18px; } .gallery { padding: 10px 18px 0; } .slide img { width: 100%; max-width: 100%; height: 58vh; } .details { width: 100%; margin-top: 12px; text-align: center; } .details h1 { font-size: 13px; text-align: center; } .details p { font-size: 11px; text-align: center; } .controls { width: 100%; margin-top: 25px; } .controls button { font-size: 11px; } }