.samples-grid{
    margin: min(30px, 6vw);
    display: grid;
    grid-template-columns: repeat(3, 15vw);
    gap: max(1.5vw, 1%);
    justify-content: center;
}

.sample{
    background-color: rgb(97, 97, 97);
    padding: 8% 8% 4% 8%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.1s;
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.3);

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sample:hover{
    opacity: 0.875;
}

.sample:active{
    opacity: 0.75;
}

.sample-img{
    border-radius: 5px;
    max-width: 100%;
}

.sample-download{
    margin-top: 3.5%;
    max-width: 95%;
    text-align: center;
    font-weight: 500;
    font-size: 130%;
}

@media (max-width: 1500px) {
    .samples-grid {
        grid-template-columns: repeat(3, 20vw);
    }
}

@media (max-width: 1100px) {
    .samples-grid {
        grid-template-columns: repeat(2, 25vw);
    }
  }
  @media (max-width: 800px) {
    .samples-grid {
        display: flex;
        flex-direction: column;
        gap: 5vw;
        width: 70%;
    }
    .sample-download{
        font-size: 200%;
    }
  }
  @media (max-width: 600px) {
    .sample-download{
        font-size: 150%;
    }
  }
  @media (max-width: 400px) {
    .sample-download{
        font-size: 100%;
    }
  }
  @media (max-width: 300px) {
    .sample-download{
        font-size: 80%;
    }
  }