#chords-keyslist {
    width : 80%;
    max-width : 400px;
    margin : 10px auto 0px auto;
}


/* CHORD */

#chord-chordname {
    display : block;
    width : 100%;
    margin : 30px 0px 10px 0px;
    text-align : center;
    font-size : 3em;
    color : var(--orange);

}

#chord-charts {
    padding-right : 40px;
    width : 100%;
    display : grid;
    grid-template-columns: 1fr 1fr;
}

.chord-chart  {
    overflow: hidden;
}


.chord-chart img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: translateY(-20%); /* Shifts image up to hide top */
}

#chords-typeslist {
    width : 95%;
    max-width : 700px;
    margin : 10px auto 0px auto;
}

#chords-typeslist-carrousel-title {
    margin-left : 0px;
}

#chords-typeslist-carrousel-ul {
    gap: 5px;
}
.chords-typeslist-carrousel-li {
	list-style: none;
	flex: 1;
	display : flex;

}
.chords-typeslist-carrousel-li a{
	padding : 7px 10px;
    width : 100%;
    height : 100%;
    color : var(--mainContentColor);
	border : 1px solid var(--chordsKeyBorder);
	border-radius: 10px;
	background-color : var(--chordsKeyBg);
}

.chords-typeslist-carrousel-li a:hover{
	background-color : var(--chordsKeyHoverBg);
}


/* From 490px */
@media only screen and (min-width: 30rem) {

    #chord-charts {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

    #chord-charts {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

}



/* KEYLISTER */

#keyslister {
    width : 100%;
    display : grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 5px;
}

.keyslister-key {
    flex : 1;
    aspect-ratio : 1/1;

}

#keyslister > span:nth-child(n+2):not(:nth-child(8)) {
  grid-column: span 2; /* Extra space below the second row */
}
#keyslister > span:nth-child(3) {
  grid-column: span 2; /* Extra space below the second row */
}
#keyslister > span:nth-child(2) {
  grid-column: span 2; /* Extra space below the second row */
}

#keyslister a{
    width: 100%;
    height : 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color : var(--mainContentColor);
	background-color : var(--chordsKeyBg);
    border: 1px solid var(--chordsKeyBorder);
    border-radius : 5px;
}

a.chords-currentfilter{
	background-color : var(--chordsKeyHoverBg);
}


#keyslister a:hover, #keyslister a.chords-currentfilter{
	background-color : var(--chordsKeyHoverBg);
}