body {
  font-family: Eurostile-demi;
  text-align: left;
}

h1 {
margin: auto;
  text-align: center;
  font-size: 90px;
}

.grid-container-2 {
  display: grid;
  grid-template-columns: repeat(4, 200px); /* Three columns at 100px each */
  gap: 30px; /* Spacing between the columns */
  /* Calculate total width: (3 * 100px) + (2 * 10px) */
  width: calc(4 * 200px + 2 * 10px);
  margin: auto; /* Centers the container itself */
  margin-top: 15px;
  margin-bottom: 30px;
  justify-content: center; /* Centers the grid columns within the container */
  justify-items: center;
}

.grid-container-4 {
  display: grid;
  grid-template-columns: repeat(2, 200px); /* Three columns at 100px each */
  gap: 20px; /* Spacing between the columns */
  /* Calculate total width: (3 * 100px) + (2 * 10px) */
  width: calc(2 * 200px + 2 * 10px);
  margin: 0 auto; /* Centers the container itself */
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: left; /* Centers the grid columns within the container */
  justify-items: center;
  }
/* Grid Item Styling */
.grid-item {
  color: black;
  font-size: 20px;
  text-align: center;
}

.flex-container {
display: flex;
justify-content: center;
gap: 60px;
}

@font-face {
  font-family: Eurostile-demi;
  src: url("../assets/fonts/Eurostile-Demi\ Demi.otf") format("opentype");
}

a{
  color: black;
  text-decoration: none;
}

.active{
  color: rgb(255,151,255);
}

.card {
  left: 25vw;
  width: 60vw;
  height: 50vh;
  transition: 1s ease-in-out;
  display: flex;
  flex-direction: column;
  line-height: 2vw;
}

.card span {
font-weight: bold;
color: black;
text-align: left;
display: block;
font-size: 1.5em;
}

.card .info {
font-size: large;
color: black;
display: block;
text-align: left;
font-size: 1 em;
}

.card a {
color: black;
}

.card a:hover {
color: rgb(255,151,255);
}

.card p{
font-size: large;
color: black;
display: block;
text-align: left;
font-size: 1 em;
margin-bottom: 0px;
}

.rose:hover {
color: rgb(255,151,255);
}

/* Responsive: Mobile Layout */
@media (max-width: 768px) {

.grid-container-2 {
    display: grid;
    grid-template-columns: repeat(4, 80px); /* Three columns at 100px each */
    gap: 10px; /* Spacing between the columns */
    /* Calculate total width: (3 * 100px) + (2 * 10px) */
    width: calc(4 * 80px + 2 * 10px);
    margin: 0 auto; /* Centers the container itself */
    align-items: center; /* Centers items horizontally */
}

.grid-container-4 {
  display: grid;
  grid-template-columns: repeat(2, 80px); /* Three columns at 100px each */
  gap: 10px; /* Spacing between the columns */
  /* Calculate total width: (3 * 100px) + (2 * 10px) */
  width: calc(2 * 80px + 2 * 10px);
  margin: 0 auto; /* Centers the container itself */
  align-items: center; /* Centers items horizontally */
}

.grid-item {
    min-width: 100%;
    font-size: 4vw;
    text-align: center;
}

.card {
  top: auto;
  left: auto;
  width: auto;
  height: 50vh;
  transition: 1s ease-in-out;
  display: flex;
  line-height: 1.2;
  flex-direction: column;
}

.flex-container {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

h1 {
  font-size: 22vw;
}
}