.grid-container {
    width: min(75rem, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 2rem;
}

#cards{
    visibility: hidden;
    position:absolute;
    z-index: 9999999999;
    left:35vh;
    top:20vh;
}

.card {
    padding: 2rem;
    background-image: linear-gradient(to bottom left, #e0e4e5, #40c7b9);
    border-radius: 2rem;
    box-shadow:
      inset -2px 2px hsl(0 0 100% / 1),
      -20px 20px 40px hsl(0 0 0 / .25);

    display: grid;
    grid-template-areas:
        "title icon"
        "desc butt";
    grid-template-columns: 1fr auto;
    gap: 1.2rem;

    font-family: system-ui, sans-serif;
    color: #444;
}

.card-title {
    grid-area: title;
    font-size: 1.6rem;
    font-weight: bold;
}

.card-icon {
    grid-area: icon;
}

.card-icon img {
    width: 80px;
    height: auto;
}

.card-desc {
    grid-area: desc;
    font-size: 1rem;
}

.OSButton {
  text-align: center;
  justify-content: center;
  align-self:flex-end;
  width: 80px;
  height: 40px;
}