/* ************* Custom Properties ************* */
:root {
  --first-color: #37546d;
  --first-alpha-color: #37546d75;
  --second-color: #3b83f6;
  --second-alpha-color: #3b83f675;
  --third-color: #253746;
  --third-alpha-color: #25374675;
  --red-color: rgba(243, 39, 53, 1);
  --white-color: #fff;
  --gray-light-color: #f3f3f3;
  --gray-color: #ccc;
  --gray-dark-color: #666;
  --black-color: #000;
  --link-color: #509ee3;
  --title-color: #333;
  --text-color: #222;
  --white-alpha-color: rgba(255, 255, 255, 0.5);
  --black-alpha-color: rgba(0, 0, 0, 0.5);
  --font: sans-serif, arial;
  --max-width: 1200px;
  --header-height: 6rem;
  --step--2: clamp(0.6944rem, 0.6561rem + 0.1919vi, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7727rem + 0.303vi, 1rem);
  --step-0: clamp(1rem, 0.9091rem + 0.4545vi, 1.25rem);
  --step-1: clamp(1.2rem, 1.0682rem + 0.6591vi, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2534rem + 0.933vi, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4686rem + 1.2971vi, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.7179rem + 1.7785vi, 3.0518rem);
  --step-5: clamp(2.4883rem, 2.006rem + 2.4116vi, 3.8147rem);
}

/* ************* Reset ************* */
html {
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 16px;
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text-color);
}

img {
  max-width: 100%;
  width: auto;
}

/* ************* Utilities ************* */

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

.pulse:hover {
  animation: pulse 800ms ease-in-out alternate infinite;
}

/* ************* Site Styles ************* */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  /* height: var(--header-height); */
  background-color: var(--first-color);
  box-shadow: 0 4px 4px var(--second-color);
}

.header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header__logo {
  height: 4rem;
}

.header__message {
  background-color: var(--red-color);
  color: var(--white-color);
  font-size: var(--step-1);
  text-align: center;
  margin: 0;
  padding: 8px;
}

.main {
  flex-grow: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}

.card {
  text-decoration: none;
  width: clamp(200px, 35vw, 300px);
  height: clamp(200px, 35vw, 300px);
  border-radius: 1rem;
  background-image: url(../img/foto-fachada-paseo-la-paz.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 4px 4px 4px var(--second-color);
}

.card__overlay {
  width: 100%;
  height: 100%;
  padding: 0.8rem;
  border-radius: 1rem;
  background-color: var(--black-alpha-color);
  display: flex;
}

.card__title {
  text-align: center;
  margin: auto;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--white-color);
}

@media screen and (min-width: 1024px) {
  .header__container {
    justify-content: flex-start;
  }
}