* { margin: 0; padding: 0; box-sizing: border-box; } /* Em CSS, o seletor ":root" é um seletor pseudo-classe que se refere ao elemento raiz (root) do documento HTML, ou seja, o elemento HTML . É comumente usado para definir variáveis globais (também conhecidas como variáveis de CSS) que podem ser usadas em todo o documento */ :root { --ff-heading: "Epilogue", sans-serif; --hue: 250; --bg-primary: hsl(var(--hue), 22%, 20%); --fc-primary: hsl(var(--hue), 0%, 100%); --fc-secondary: hsl(var(--hue), 50%, 80%); --fc-secondary-dark: hsl(var(--hue), 100%, 11%, 1); font-size: 62.5%; --fs-body: 1.6rem; --fs-heading: clamp(4rem, 1rem + 5vw, 5.6rem); /* utilizando a função clamp para definir um tamanho mínimo, ideal e máximo */ --fs-heading-sm: clamp(3rem, 0.5rem + 3vw, 4rem); /* utilizando a função clamp para definir um tamanho mínimo, ideal e máximo */ } .page { max-width: clamp(33rem, 30rem + 60vw, 117rem); /* utilizando a função clamp para definir um tamanho mínimo, ideal e máximo */ padding: 0 5rem; margin: 0 auto; } img { width: 100%; height: auto; } body { font-family: var(--ff-heading); background-color: var(--bg-primary); color: var(--fc-primary); font-size: var(--fs-body); } header { margin: 10rem 0 8rem; font-family: var(--ff-heading); text-align: center; animation: topdown 700ms ease-in-out; } header p { font-family: var(--ff-heading); color: var(--fc-secondary); text-transform: uppercase; line-height: 3.2rem; letter-spacing: 3px; font-weight: 400; margin-bottom: 1.7rem; } header h1 { font-weight: 800; font-family: var(--ff-heading); line-height: 4.8rem; } main { display: grid; gap: 3.2rem; animation: downtop 700ms 350ms backwards; } .card { position: relative; font-family: var(--ff-heading); } .card img { height: 41.6rem; object-fit: cover; /* É usado para ajustar imagens ou vídeos, dentro de um contêiner quando suas proporções de aspecto não coincidem. */ filter: brightness(0.5); /* propriedade de filtro */ border-radius: 6px; transition: all 200ms; /* Essa é uma propriedade de transição CSS que especifica a duração da transição e o tipo de transição que será aplicada a todas as propriedades animáveis de um elemento */ } .card img:hover { transform: scale( 1.1 ); /* Essa é uma propriedade CSS que permite aplicar transformações 2D ou 3D a um elemento. */ filter: initial; /* resetando o filtro */ } .card h2 { position: absolute; bottom: 5.2rem; left: 2.8rem; font-size: var(--fs-heading-sm); font-weight: 800; display: flex; flex-direction: column; gap: 2.3rem; } .card h2 span { border-radius: 2rem; background-color: var(--fc-primary); font-size: var(--fs-body); font-weight: 400; color: var(--fc-secondary-dark); padding: 0 1.6rem; width: fit-content; /* `fit-content` ajusta automaticamente com base no tamanho do conteúdo dentro do elemento */ height: 3.8rem; display: inline-flex; align-items: center; } @keyframes topdown { 0% { opacity: 0; transform: translateY(-15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes downtop { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @media (min-width: 700px) { /* :root { --fs-heading: 5.6rem; } .page { max-width: 117rem; padding: 0 5rem; } */ main { grid-template-columns: 1fr 1fr; } } @media (min-width: 930px) { /* :root { --fs-heading: 5.6rem; } .page { max-width: 117rem; padding: 0 5rem; } */ main { grid-template-areas: "A B B" "C C D"; } main div:nth-child(1) { grid-area: A; } main div:nth-child(2) { grid-area: B; } main div:nth-child(3) { grid-area: C; } main div:nth-child(4) { grid-area: D; } }