.secao{
    display: grid;
    align-items: end;
    row-gap: 2rem;
}

.secao-horizontal, .secao-vertical{
    grid-template-rows: 70px auto;
}

.secao-horizontal .secao__cartoes{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr));
    gap: 1.25rem;
}

.secao-vertical{

    display:grid;
    grid-template-columns: 1fr auto;

}

.secao-vertical .secao__cartoes{
    display: grid;
    grid-auto-flow: column;
    overflow-x: scroll;
    overflow-y: hidden;
    grid-column: 1/3;
    column-gap: 1.25rem;
}

.secao-vertical .secao__cartoes .cartao a{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.secao-vertical .secao__cartoes .cartao__titulo{
    flex-grow: 1;
}

.secao-player{
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: auto auto auto;
}

.player_descricao{
    display: grid;
    grid-template-columns: auto 2fr;
    grid-template-rows:  1fr 2fr;
    column-gap: 0.8rem;
    row-gap: 0.4rem;
}

.player_descricao img{
    grid-area: 1 / 1 / 3 / 2;
    align-items: center;
}

.player_descricao h3{
    grid-area: 1 / 2 / 2 / 3;
    align-content: center;
}

.player_descricao span{
    grid-area: 2 / 2 / 3 / 3;
}

/*player-tmeporizador*/

.player_temporizador-botoes{
    display: grid;
    grid-template-columns: 5% 5% 15% 5% 5%;
    padding-left: 20%;
    column-gap: 0.5rem;
}

.player_temporizador-cronometro{
    display: grid;
    grid-template-columns: 10% 50% 10%;
    padding-left: 5%;
}

.player_temporizador-cronometro img{
    align-self: center;
}



/*player-volume*/

.player_volume{
    display: grid;
    grid-template-columns: 30px 100px 30px;
    grid-template-rows: 1fr;
    column-gap: 0.3rem;
}

.abaixar__volume{
    grid-area: 1 / 1 / 2 / 2;
    text-align: end;
}

.progresso__volume{
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    padding-bottom: 2%;
}

.aumentar__volume{
    grid-area: 1 / 3 / 2 / 4;
    text-align: start;
}