@charset "utf-8";
/* CSS Document */

section{
    /* width:80%;*/
    margin-left: auto;
    margin-right: auto;
}

.card-wrapper {
    /* max-width: 50%; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: center;
}

.card{
	
	position: relative;
	display: flex;
	min-height: 300px;
	background: linear-gradient(43deg, #4158D0 0%, #c850c0 46%, #ffcc70 100%);
	cursor:default;
}

.card::before,
.card::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
	}

.card::before{
	border-style: solid;
	border-width: 0 0 50px 50px;
	border-color: transparent transparent #fff transparent;
	transition: border .25s;
	cursor:pointer;
}

.card::after {
	content: 'Comprar';
	bottom: 5px;
	right: 5px;
	color: #8e4e8e;
	font-size: 1.5rem;
	opacity: 0;
	font-family: 'Arial', cursive;
	cursor:pointer;
}

.card:hover::before {
	border-width: 0 0 100px 100px;
	
}

.card:hover::after {
	opacity: 1;
	transition: opacity .5s;
	cursor:pointer;
}

.card_title {
	padding: 1rem;
    margin: auto;
	font-size: 3rem;
    color:White;
    font-weight: 900;
}

.card_subtitle {
	
	font-size: 2rem;
    color:White;
}

.card_subtitleExtra {
	
	font-size: 1.5rem;
    color:White;
    font-weight: 900;
}