Example Main Page/Sandbox

.mcf-wrapper {

```
   background-color: rgba(var(--theme-page-text-color--rgb),.1);
   padding: 24px 36px

```

}

.mcf-content {

```
   display: none;

```

}

.mcf-mosaic {

```
   display: flex;
   flex-direction: row;
   justify-content: space-between;

```

}

h2.mcf-header {

```
   color: var(--theme-page-text-color);
   font-size: 24px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-weight: 700;
   line-height: 20px;
   margin-bottom: 18px;

```

}

.mcf-column {

```
   display: flex;
   flex-basis: 32%;
   flex-direction: column;
   width: 32%;

```

}

.mcf-column>div {

```
   margin-bottom: 12px

```

}

.mcf-column>div:last-child {

```
   margin-bottom: 0

```

}

.mcf-card {

```
   border: 1px solid var(--theme-border-color);
   border-radius: 3px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   height: 283.2574850299px;

```

}

.mcf-card,.mcf-card:hover {

```
   text-decoration: none

```

}

.mcf-card .wds-button.wds-is-secondary {

```
   cursor: pointer

```

}

.mcf-card .wds-button.wds-is-secondary:hover {

```
   border-color: var(--fandom-link-color);
   color: var(--fandom-link-color)

```

}

@media only screen and (min-width: 1500px) {

```
   .mcf-card {
       height:333.9640718563px
   }

```

}

@media only screen and (min-width: 1024px) and (max-width:1279px) {

```
   .mcf-card {
       height:265.7724550898px
   }

```

}

@media only screen and (max-width: 1023px) {

```
   .mcf-card {
       height:196.998003992px
   }

```

}

.mcf-card-one-and-half-tall {

```
   height: 430.8862275449px

```

}

@media only screen and (min-width: 1500px) {

```
   .mcf-card-one-and-half-tall {
       height:506.9461077844px
   }

```

}

@media only screen and (min-width: 1024px) and (max-width:1279px) {

```
   .mcf-card-one-and-half-tall {
       height:404.6586826347px
   }

```

}

@media only screen and (max-width: 1023px) {

```
   .mcf-card-one-and-half-tall {
       height:301.497005988px
   }

```

}

.mcf-card-article {

```
   background-color: #002a32;
   overflow-y: hidden;
   position: relative

```

}

.mcf-card-article\_\_thumbnail-container {

```
   position: absolute;
   text-align: center;
   top: 25%;
   width: 100%;

```

}

.mcf-card-article\_\_thumbnail-container>svg {

```
   fill: #00d6d6;
   height: 34.5%;
   opacity: .2;
   width: 34.5%

```

}

.mcf-card-article\_\_thumbnail {

```
   width: 100%

```

}

.mcf-card-article\_\_wrapper {

```
   background: linear-gradient(180deg,#0000,#000);
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: flex-end;
   position: absolute;
   width: 100%;

```

}

.mcf-card-article\_\_title {

```
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   line-height: 20px;
   margin-bottom: 6px;
   padding: 0 18px;

```

}

.mcf-card-article\_\_subtitle {

```
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   line-height: 20px;
   margin-bottom: 13px;
   opacity: .5;
   padding-left: 18px;

```

}

.mcf-card-article\_\_video-container {

```
   align-items: center;
   display: flex;
   flex: 1;
   justify-content: center

```

}

.mcf-card-article\_\_video-icon {

```
   height: 108px;
   min-width: 108px;
   width: 108px

```

}

@media only screen and (max-width: 1023px) {

```
   .mcf-card-article__video-icon {
       height:72px;
       min-width: 72px;
       width: 72px
   }

```

}

.mcf-card-article\_\_sponsored-bagde {

```
   align-items: center;
   background-color: #1e0c1bb3;
   border-radius: 2px;
   display: flex;
   height: 30px;
   left: 12px;
   padding: 0 10px;
   position: absolute;
   top: 12px

```

}

.mcf-card-article\_\_sponsored-text {

```
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .3px;
   line-height: 1.17

```

}

.mcf-card-article\_\_link {

```
   position: relative;

```

}

.mcf-card-article\_\_personalization {

```
   color: #ffc500;
   font-size: 10px;
   font-weight: 700;
   margin-bottom: 10px;
   padding-left: 18px

```

}

.mcf-card-wiki-articles {

```
   background-color: var(--theme-page-background-color);

```

}

.mcf-card-wiki-articles\_\_header {

```
   background-color: var(--theme-accent-color);
   background-position: 100%;
   background-repeat: no-repeat;
   background-size: contain;
   color: var(--theme-accent-label-color);
   font-size: 18px;
   font-weight: 700;
   padding: 16px;
   position: relative;

```

}

.mcf-card-wiki-articles\_\_header:before {

```
   background: linear-gradient(to right,rgba(var(--theme-header-background-color--rgb),.5),rgba(var(--theme-header-background-color--rgb),.5)),linear-gradient(to left,#0000 50px,var(--theme-header-background-color) 220px);
   content: "";
   display: block;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%

```

}

@media only screen and (max-width: 1023px) {

```
   .mcf-card-wiki-articles__header {
       font-size:14px;
       padding: 12px 16px 16px
   }

```

}

.mcf-card-wiki-articles\_\_header-text {

```
   position: relative;
   word-wrap: break-word;

```

}

.mcf-card-wiki-articles\_\_list {

```
   display: flex;
   flex-direction: column;
   height: 100%;
   margin: 0 18px;

```

}

.mcf-card-wiki-articles\_\_item {

```
   border-bottom: 1px solid var(--theme-border-color);
   display: flex;
   flex: 0 1 33.3333333333%;

```

}

.mcf-card-wiki-articles\_\_item:last-child {

```
   border-bottom: 0

```

}

.mcf-card-wiki-articles\_\_item-link {

```
   align-items: center;
   color: var(--theme-page-text-color);
   display: flex;
   text-decoration: none;
   width: 100%;

```

}

.mcf-card-wiki-articles\_\_item-link:hover {

```
   text-decoration: none

```

}

.mcf-card-wiki-articles\_\_circle {

```
   align-items: center;
   background-color: rgba(var(--theme-page-text-color--rgb),.2);
   border-radius: 50%;
   color: var(--theme-page-text-color);
   display: flex;
   flex: 0 0 36px;
   font-size: 18px;
   font-weight: 700;
   height: 36px;
   justify-content: center;
   line-height: 1;
   width: 36px;

```

}

@media only screen and (max-width: 1023px) {

```
   .mcf-card-wiki-articles__circle {
       flex:0 0 24px;
       font-size: 14px;
       height: 24px;
       width: 24px
   }

```

}

.mcf-card-wiki-articles\_\_title {

```
   font-size: 14px;
   font-weight: 500;
   margin-left: 12px;
   overflow: hidden;

```

}

@media only screen and (max-width: 1023px) {

```
   .mcf-card-wiki-articles__title {
       font-size:12px
   }

```

}

*Thursday - January 25, 2024*

# Header

Add a description of the image here

Add a description of the image here

Add a description of the image here

Add a description of the image here

Add a description of the image here

Add a description of the image here

## **From the community**

Admins:
 use this area to make announcements, suggestions, or share helpful tips with new contributors on your wiki.