@import url('/css/variables.css');
@import url('/css/overlay-hamburger.css');
  
body {
  margin: 0;
  font-family: var(--primary-font-family, Arial, sans-serif);
  background-color: var(--NavyInk, #2c3e50);
  color: var(--secoundary-text-color);
  height: 100vh;
  width: auto;
}

main{
  background:#c8e8ff;
}

.image-row{
  display:flex;
  flex-wrap:wrap;
  gap:139px;
  justify-content:center;
  padding:2rem 20px;
}

.card{
  width:320px;
  display:flex;
  flex-direction:column;
}

.card:is(:hover, :focus-visible) {
  transform: translateY(-6px);
  transition: 80ms;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border-radius: 20px;
}

.card img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
  border-radius: 20px 20px 0 0;
}

.cta-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 0 0 20px 20px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease;
}

.cta-btn:hover {
  background-color: #0056b3;
}