.main-container{
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    --gap: 20px;
    --columns: 3;
    gap: var(--gap);
    justify-content: start;
	width: 100%;
}

.card{
    height: fit-content;
    width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
    //height: 150px;
    border: 5px solid #fdc54d;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
}

.card h3{
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    color: #000;
    margin: 0;
}

.card a{
    background: #ff6f39;
    color: #000;
    border: 0;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
}

.card a:hover{
    background: white;
    border: 1px solid #ff6f39;
    color: #ff6f39;
	text-decoration: none;
}

.tagImage{
	height: 200px;
	width: 100%;
	object-fit: contain;
}

@media screen and (max-width: 1200px){
    .main-container{
        --columns: 2;
    }
}

@media screen and (max-width: 640px){
    .main-container{
        --columns: 1;
    }
}