@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrap {
    width: 400px;
    margin: 0 auto;
    background-color: #fff;
}
.rogo img {
    width: 200px;
}
.rotate img {
    width: 100%;
    height: 500px;
    vertical-align: bottom;
    object-fit: cover;
    margin: 30px;
    transition: 1s;
    border-radius: 30px;
    clip-path: polygon(
        20% 0%,
        80% 0%,
        100% 20%,
        100% 80%,
        80% 100%,
        20% 100%,
        0% 80%,
        0% 20%
    );
}
.rotate img:hover {
    transform: rotate(10deg);
}

h3 {
    padding: 30px;
    color: darkslategray;
    text-align: center;
}
@media (min-width: 768px) {
    .wrap {
        width: 1000px;
        margin: 0 auto;
        background-color: #fff;
    }
    .rogo img {
        width: 300px;
    }
}