article {
    position: relative;
    width: 20rem;
    aspect-ratio: 4/5;

    background-color: aliceblue;
    border-radius: 1rem;
    overflow: hidden;

    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.9);

    margin-bottom: 1rem;
    z-index: 0;
}

article section:first-child {
    width: 100%;
    height: 3rem;
    
    background-color: rgb(163, 156, 152);
    background-image: linear-gradient(
		-75deg,
		#fff0 0% 25%,
		rgb(190, 186, 182) 25% 50%,
		#fff0 50% 100%
	);
}

article section:nth-child(2) {
    padding: 10%;
    padding-top: 0px;
}

article span {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

h1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.purple section:first-child {
    background-color: blueviolet;
    background-image: linear-gradient(
		-75deg,
		#fff0 0% 25%,
		rgb(192, 100, 228) 25% 50%,
		#fff0 50% 100%
	);
}

.green section:first-child {
    background-color: rgb(43, 226, 89);
    background-image: linear-gradient(
		-75deg,
		#fff0 0% 25%,
		rgb(190, 228, 100) 25% 50%,
		#fff0 50% 100%
	);
}

.pink section:first-child {
    background-color: rgb(226, 43, 171);
    background-image: linear-gradient(
		-75deg,
		#fff0 0% 25%,
		rgb(228, 100, 190) 25% 50%,
		#fff0 50% 100%
	);
}

.orange section:first-child {
    background-color: rgb(226, 116, 43);
    background-image: linear-gradient(
		-75deg,
		#fff0 0% 25%,
		rgb(228, 177, 100) 25% 50%,
		#fff0 50% 100%
	);
}

.black section:first-child {
    background-color: rgb(41, 35, 32);
    background-image: linear-gradient(
		-75deg,
		#fff0 0% 25%,
		rgb(94, 90, 86) 25% 50%,
		#fff0 50% 100%
	);
}