body {
    font-family: Arial, sans-serif
}

main {
    max-width: 1000px;
    margin: 30px auto;
    border: 1px solid #5277ad;
    padding: 8px;
    height: 470px
}

header {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0054;
    animation: banner 4s infinite alternate;
    font-weight: bold
}

section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 300px
}

.frame {
    width: 160px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #ffef48
}

.one {
    border: 4px solid red;
    overflow: hidden
}

.one img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: swap 6s infinite
}

.two,
.three {
    background: #13d8dc;
    border: 4px dashed #2754dc;
    border-radius: 0 30px 30px 30px
}

.four {
    background: teal;
    animation: spin 4s linear infinite
}

@keyframes banner {
    0% {
        background: #ff0054;
        font-size: 12px
    }

    50% {
        background: #f200ff;
        font-size: 30px
    }

    100% {
        background: #00b7ff;
        font-size: 14px
    }
}

@keyframes swap {

    0%,
    32% {
        content: url('../Images/1.jpg')
    }

    33%,
    65% {
        content: url('../Images/2.jpg')
    }

    66%,
    100% {
        content: url('../Images/3.jpg')
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:700px) {
    section {
        gap: 12px;
        flex-wrap: wrap;
        height: auto
    }

    .frame {
        width: 130px;
        height: 140px
    }

    main {
        height: auto
    }
}