Vuetify v-card elevation doesn't show up, flat attribute does - vue.js

Question

I'm trying to change the elevation of my v-cards in vuetify in my index.vue page but the changes dont show up, right now the code for my card reads: <v-card class="cards" elevation="0" shaped> but I tried it with class="elevation-0" as well. It doesn't work with any elevation but if I e.g. use the attribute: ``` the changes show up.
In my other pages the elevation attribute works (in my _slug.vue page), just in the index.vue page it doesn't. I also tried to change move the code of the cards to an own component but it doesn't work as well.
The Component in my index.vue file:
<template>
<NuxtLink :to="'/' + Link">
/* This is the card I'm talking about */
<v-card class="cards" elevation="0" shaped>
<img class="thumbnail" :src="Image" />
<h3 class="video-title">{{ Title }}</h3>
<h3 class="video-type">Most {{ Name }}:</h3>
</v-card>
</NuxtLink>
</template>
<script>
export default {
name: "ThumbnailCard",
props: {
Image: String,
Title: String,
Link: String,
Name: String,
},
};
</script>
<style scoped>
.cards {
margin-top: 15vh;
margin-left: 1vw;
margin-right: 1vw;
height: 30vh;
text-align: center;
}
.thumbnail {
width: 100%;
height: 30vh;
}
.video-type {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 9vh;
}
.video-title {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 18vh;
}
#media only screen and (max-width: 599px) {
.cards {
margin-top: 2vh;
margin-bottom: 2vh;
margin-left: 15vw;
margin-right: 15vw;
height: 14.5vh;
}
.thumbnail {
height: 14.5vh;
}
.video-type {
margin-top: 4vh;
}
.video-title {
margin-top: 8vh;
}
}
</style>
The whole code for my index.vue:
<template id="main">
<div>
<div id="title-section">
<h1 id="title">Title</h1>
<h2 id="description">This Site is awesome, have a look</h2>
</div>
<v-container id="content-wrapper">
<v-row no-gutters>
<v-col cols="12" sm="4">
<ThumbnailCard
:Image="recentImage"
:Title="recentTitle"
:Link="recentLink"
Name="Recent"
/>
</v-col>
<v-col cols="12" sm="4">
<ThumbnailCard
:Image="popularImage"
:Title="popularTitle"
:Link="popularLink"
Name="Popular"
/>
</v-col>
<v-col cols="12" sm="4">
<ThumbnailCard
:Image="relevantImage"
:Title="relevantTitle"
:Link="relevantLink"
Name="Recent"
/>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
import ThumbnailCard from "#/components/global/ThumbnailCard";
export default {
name: "index",
components: {
ThumbnailCard: ThumbnailCard,
},
async asyncData({ $content, params }) {
const articles = await $content("articles")
.only(["date", "slug", "title", "img"])
.fetch();
const datesArr = articles.map((a) => {
return new Date(a.date).getTime() / 1000;
});
const recentTitle = articles[datesArr.indexOf(Math.min(...datesArr))].title;
const recentLink = articles[datesArr.indexOf(Math.min(...datesArr))].slug;
const recentImage = articles[datesArr.indexOf(Math.min(...datesArr))].img;
const popularTitle = articles[0].title;
const popularLink = articles[0].slug;
const popularImage = articles[0].img;
const relevantTitle = articles[0].title;
const relevantLink = articles[0].slug;
const relevantImage = articles[0].img;
return {
recentTitle,
recentLink,
recentImage,
popularTitle,
popularLink,
popularImage,
relevantTitle,
relevantLink,
relevantImage,
};
},
};
</script>
<style>
html {
overflow-y: auto;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
#title-section {
background: black;
width: 100%;
height: 40vh;
text-align: center;
}
#title {
color: white;
font-size: 4rem;
}
#description {
color: white;
}
#content-wrapper {
height: 60vh;
width: 100%;
}
</style>

Answer 1

For anyone having the same problem: I forgot the <v-app> component which somehow resulted in the elevation attribute not working

Answer 2

the flat attribute works well to remove elevation from most vuetify components