.homeCard-container {

 max-width: 1200px;
 width: 100%;

 margin: auto;

 padding-top: 3rem;
 padding-bottom: 3rem;

 /* Add these properties for vertical centering */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 /* gap: 1rem; */
 z-index: 100;
 position: relative;
 /* top: 2rem; */
 background-color: hsl(var(--h), var(--s), calc(var(--l)));
 color: hsl(270, 20%, 20%);
 border-radius: 0rem 0rem 0rem 0rem;


}

.regularCard-container {
 max-width: 1200px;
 width: 100%;
 margin: auto;
 padding: 3rem 1rem 3rem 1rem;
 /* Add these properties for vertical centering */
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-start;
 /* gap: 1rem; */
 z-index: 100;
 position: relative;
 /* top: 2rem; */
 background-color: white;
 color: hsl(270, 20%, 20%);
 border-radius: 0rem 0rem 0rem 0rem;

}

.homeCard-container__title {
 line-height: var(--line-height-base);
 padding: 3rem;
 text-transform: capitalize;
 /* margin-top: 1rem; */
}

.homeCards {
 display: grid;
 grid-template-rows: auto;
 gap: 1rem;
 width: 100%;
 margin-top: 3rem;
 margin-bottom: 3rem;
}

.regularCards {
 display: grid;
 grid-template-rows: auto;
 gap: 3rem;
 /* width: 100%; */
 padding-left: 1rem;

}

.homeCard {
 margin: 0;
 padding: 0;
}

.homeCard {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-items: center;
 align-content: center;
 justify-content: center;

}

.regularCard {
 /* margin-left: 3rem; */
 padding: 1rem;
 display: flex;
 flex-direction: column;
 justify-self: flex-start;
 align-self: flex-start;
 align-items: flex-start;
 justify-items: flex-start;
 gap: 1rem;

}

.homeCard__title {
 font-size: 1.2rem;
 line-height: var(--line-height-base);
 /* width: 80%; */
 text-align: center;
 /* padding: 0.5rem; */
}

.regularCard__title {
 /* margin-left: 2rem; */
 justify-self: flex-start;
 align-self: flex-start;
}

.homeCard,
.homeCard a,
.homeCard i,
.regularCard {
 color: var(--font-base-color);
}

.regularCard__content {
 font-size: calc(0.8 * var(--font-base-size));
}

.homeCard a {
 font-size: 1rem;
}

.homeCard a i {
 color: hsl(0, 0%, 100%, 0.25);
 font-size: 2rem;
}

.homeCard__content {
 font-size: 1rem;
 line-height: var(--line-height-base);
}

.chomeCardard a i {
 justify-self: end;
 /* Align icon to the right */
}

.homeCard__readmore {
 /* font-weight: bold; */
 color: var(--color-primary-gray);
 display: inline-block;
 /* text-decoration: underline; */
}


.card__action {
 display: grid;
 grid-template-columns: 1fr 1fr;
 /* grid-template-columns: auto; */
 align-items: center;
 justify-items: center;
 justify-content: center;
 align-content: center;
 /* width: 80%; */
 margin-top: 3rem;
 margin-bottom: 3rem;
 gap: 0.5rem;
}

.card__action-regular {
 display: grid;
 grid-template-columns: 1fr;
 align-items: center;
 justify-items: center;
 justify-content: center;
 align-content: center;
 width: 50%;
 margin-top: 1rem;
 margin-bottom: 1rem;
 gap: 1rem;
}

.card__button {
 font-size: var(--font-base-size);
 padding: var(--font-base-size);
 border: 0.25rem solid;
 border-radius: 2rem;
 width: 100%;
 color: hsl(260, 50%, 30%);
 border-color: hsl(260, 50%, 90%);
 background: linear-gradient(white, hsl(260, 100%, 90%));
 transition: all 0.3s;
}

.card__button:hover {
 background: linear-gradient(hsl(260, 90%, 90%), white);
 color: hsl(260, 90%, 30%);
 border-color: hsl(260, 100%, 90%);
}

.card__button-circle {
 border-radius: 50%;
 aspect-ratio: 1;
 margin-top: 0;
}

.the-items {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-md);
 align-items: center;
 justify-content: center;
 /* background-color: hsla(270, 40%, 80%, 0.25); */
 border-radius: 2rem;
 margin-top: 2rem;
 /* margin-bottom: 2rem; */
 padding: 1rem;
}

.the-item {
 /* background: var(--bgcolor-dark); */
 /* border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); */
 padding: var(--padding-container);
 min-width: 100%;
 transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.the-item-checkin {
 background: inherit;
}

/* Base styles (mobile first) */
.the-item:hover,
.the-item:active {
 /* transform: translateY(-5px); */
 box-shadow: 0 0px 0px hsla(0, 0%, 0%, 0);
 /* background-color: white; */
}




.the-item-readmore {
 display: block;
 width: fit-content;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 color: white;
 border-radius: 8px;
 transition: all 0.3s ease;
 padding: 0.25rem 0.5rem;
 margin: var(--space-md);
 font-size: calc(0.75 * var(--font-base-size));
 background-color: hsl(var(--link-background-color));
}

.the-item-readmore-inline {
 display: inline;
}

.the-item-readmore:hover {
 background-color: hsla(var(--link-background-color), var(--hover));
 color: hsl(var(--link-color-alternative));
}