/*basic settings*/
main{
    padding: 0px 10%;
    margin-top: 100px;
}
@media (min-width:768px) {
    main{
        padding: 0px 3%;
    }
}
@media (min-width:1024px) {
    main{
        padding:0px 10%
    }
}


/*main page*/
main h1{
    text-align: center;
    display: block;
}
main p{
    text-align: center;
}
main h3{
    text-align: center;
    margin: 5px;

}
.uvod{
    margin-top: 100px;
}
.uvod h1{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
}
.uvod p{
    margin-top: 0px;
    margin-bottom: 80px;
}
div.wrapper {
    display: flex;
    flex-direction:column;
    justify-content: center;
    gap: 20px;
}
.wrapper a {
    flex-basis: 100%;
    background-color: #f2f2f8;
    border-radius: 15px;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    box-sizing: border-box;
    position: relative;
    
}
.wrapper a:hover{
    transform: translateY(-6px);
    background-color:#8085E7 ;
}
img{
    width:100% ;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
    top: 0px;
}
.small-img{
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.small-img img{
    border-radius: 0px;
    
}
.small-img div{
    display: flex;
    flex-grow: 2;
    align-items: center;
    justify-content: center;
}


@media (min-width:768px) {
    div.wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-;
        flex-direction: row;

    }
    .wrapper a {
        flex-basis: calc(33.33% - 20px);
        max-width: calc(33.33% - 20px);
        min-width: calc(33.33% - 20px);
        margin-bottom: 10px;
    }
}